sql catalyst
Adding User-generated Content to Adobe Business Catalyst: The Dress Marketplace
将用户生成的内容添加到Adobe Business Catalyst：服装市场
In earlier articles in this series, we used Adobe Business Catalyst to create an ecommerce website with content management capabilities, integrated online store, and dynamic capabilities without having to write any custom code. In this installment, we’re going to extend the site further building a custom web app to power an online marketplace. Test yourself with our short quiz at the end.
在本系列的早期文章中，我们使用Adobe Business Catalyst创建了一个具有内容管理功能，集成的在线商店和动态功能的电子商务网站，而无需编写任何自定义代码。 在本期中，我们将扩展站点，进一步构建一个自定义Web应用程序以为在线市场提供动力。 最后，通过我们的简短测验来测试自己。
In this case, our client, the dance school, wants to create an online marketplace where people can list and sell their dresses. I’ll use this project as an example of user-generated content capabilities, which you can add to your client’s site with a bit of planning, but without back-end database development.
在这种情况下，我们的客户(舞蹈学校)希望创建一个在线市场，人们可以在其中列出和出售自己的服装。 我将以该项目作为用户生成的内容功能的示例，您可以通过一些计划将其添加到客户的站点中，而无需进行后端数据库开发。
Additional reading includes;
其他阅读内容包括；
Planning for Your Web App
规划您的Web应用
Executing the application is going to be easy, but I want to reinforce another topic I’ve touched on in my articles: planning. Taking some time to think about what you and your client want to achieve, as well as how you think it should fit into the existing site, will mean the difference between a fulfilling and a frustrating project.
执行该应用程序将很容易，但是我想强调一下我在文章中谈到的另一个主题：规划。 花一些时间考虑一下您和您的客户想要实现的目标，以及您认为它应该如何适合现有站点，这将意味着一个令人满意的项目与令人沮丧的项目之间的区别。
First of all, let’s clarify what we want to do in simple terms: we want to allow people to upload information about dresses they wish to sell. Such information will be searched or browsed by other people using the dance school website. In essence, we’re talking about some user stories. A user story is a small narrative that describes a discrete piece of functionality you want to add to your application. Remember, even though you won’t need to write any back-end code, you’re still designing an app. For our site, we can discuss a couple of scenarios with our client that will add functionality to their website:
首先，让我们用简单的术语来阐明我们想做的事情：我们希望允许人们上传有关他们要出售的礼服的信息。 其他人将使用舞蹈学校的网站搜索或浏览此类信息。 本质上，我们正在谈论一些用户故事 。 用户故事是一个简短的叙述，它描述了要添加到应用程序中的离散功能。 请记住，即使您不需要编写任何后端代码，您仍在设计应用程序。 对于我们的网站，我们可以与客户讨论几种方案，这些方案将为其网站添加功能：
- Create a dress listing 创建服装清单
- Browse dress listings 浏览礼服清单
- Search dress listings 搜索礼服清单
The idea is to get a little more detail about how we want this to work on the website. While we won’t write a user story for every scenario in this article, we’ll write one for the first: Create a dress listing.
这个想法是要获得更多关于我们希望它如何在网站上工作的细节。 尽管我们不会在本文中针对每种情况都写一个用户故事，但是我们将为第一个场景写一个：创建一个服装清单。
Jane’s daughter Molly has outgrown her competition dress and will need a new one. The current dress is in excellent condition and Jane would like to sell it to cover part of the price of the new dress. Jane knows that many families from her dance school use the school’s website to keep up with information about classes and to buy shoes, music, and other items they need. Jane would like to list information about Molly’s dress for sale. The information should include the size, condition, price, how to contact Jane, and an image of the dress.
简的女儿莫莉(Molly)的比赛装束已经不够用，需要换一件新的。 当前的连衣裙状况良好，Jane希望将其出售以弥补新连衣裙的部分价格。 简知道，她舞蹈学校的许多家庭都使用学校的网站来了解有关班级的信息，并购买他们需要的鞋子，音乐和其他物品。 简想列出有关待售的莫莉礼服的信息。 信息应包括尺寸，状况，价格，如何联系Jane以及礼服图像。
In practice, you could write up a few different user stories to capture slight variations, but this write-up gives us some good detail to get started. Plus, it’s very easy to send to your client so that they can review it and provide feedback, and you can both start thinking about the new functionality in the same way.
在实践中，您可以编写一些不同的用户案例来捕获细微的变化，但是此编写为我们提供了一些很好的入门细节。 另外，发送给您的客户非常容易，以便他们可以对其进行审查并提供反馈，并且您都可以以相同的方式开始考虑新功能。
A web app in Business Catalyst is a collection of information pieces organized around a common theme. In this example, the theme is a dress, and the information is the set of details that describe the dress.
Business Catalyst中的Web应用程序是围绕通用主题组织的信息片段的集合。 在此示例中，主题是礼服，信息是描述礼服的详细信息集。
Those details are data elements that we’ll set up as fields in our web app. Every web app automatically has a name and description, but you should make a list of the other fields you’ll need to create, such as:
这些详细信息是我们将在Web应用程序中设置为字段的数据元素。 每个Web应用程序都会自动具有名称和描述，但是您应该列出需要创建的其他字段的列表，例如：
- price 价钱
- age of the dancer 舞者的年龄
- age of the dress 衣服的年龄
- measurements 测量
- seller’s name, phone, email address 卖家名称，电话，电子邮件地址
Now we have a list of fields to collect and show for each dress, so we’re almost there. We also want to let customers upload an image of their dress, too. In a traditional app, managing file upload capabilities can be tricky, but in Adobe Business Catalyst, it’s a snap.
现在，我们有了要收集和显示的每种衣服的字段的列表，所以我们快到了。 我们还希望客户也可以上传自己的服饰图片。 在传统应用程序中，管理文件上载功能可能很棘手，但是在Adobe Business Catalyst中，这很容易。
Before we get started, let’s go to the File Manager and create what we’re going to want to use for the pages related to the app.
在开始之前，让我们转到文件管理器 ，创建要用于与该应用程序相关的页面的内容。
We’ll make a directory for the images that will be uploaded, and we’ll make a directory for the files related to the app itself.
我们将为要上传的图像创建目录，并为与应用程序本身相关的文件创建目录。
Creating the Web App
创建Web应用
A web app is a Module, so go to Modules > Web Apps and click on Build a New Web App. There are three sections of information that you need to provide: Web App Details, Customer Options, and Can Customers Create Web Apps?, and Customer Options. Adobe Business Catalyst provides a lot of features at your disposal to make creating an app easy.
Web应用程序是一个模块，因此请转到“ 模块”>“ Web应用程序” ，然后单击“ 构建新的Web应用程序” 。 您需要提供三部分信息：“ Web应用程序详细信息”，“客户选项”，“客户可以创建Web应用程序吗？”和“客户选项”。 Adobe Business Catalyst提供了许多功能供您使用，使创建应用程序变得容易。
The process is broken up into four steps in the Wizard: Web App Details (the page you are on), Add Custom Fields, Customize Web App Layout, and Set Up Auto Responder.
在向导中，该过程分为四个步骤： Web应用程序详细信息 (位于您所在的页面)， 添加自定义字段 ， 自定义Web应用程序布局和设置自动响应器 。
In Web App Details, you’ll name the app. In my case I’m making dress listings, so I name it Dress Listings. Always try to use meaningful names, and avoid being too technical; this is a business application and we want to use names that are relevant to the business.
在Web App Details中 ，您将为应用命名。 就我而言，我正在制作礼服清单，所以我将其命名为礼服清单 。 始终尝试使用有意义的名称，并避免过于专业化； 这是一个业务应用程序，我们要使用与业务相关的名称。
To fill out the next two sections, let’s think back to our user story. Jane wants to create a listing herself, so the answer to Can Customers Create Web Apps? is Yes. Check the box for Add new items.
为了填写接下来的两个部分，让我们回顾一下我们的用户故事。 Jane想要自己创建一个列表，因此客户可以创建Web应用程序的答案吗？ 是的 。 选中添加新项目框。
We want listings to show up right away, so we’re unchecking Requires Approval — that’s going to get us a simple app that lets customers create a listing that will show up automatically on submission. While we’re going to add authentication for this app later on in the article, we’re not going to use system administration roles, so leave Role Responsible as None Specified.
我们希望列表立即显示，因此我们取消了Requires Approval ( 要求批准)的选择 -这将使我们拥有一个简单的应用程序，该程序可让客户创建一个列表，该列表将在提交后自动显示。 在本文稍后将为该应用程序添加身份验证时，我们将不使用系统管理角色，因此将Role Responsables保留为None Specified 。
In the Customer Options section, you manage the expiration of the content, file upload, and ecommerce options. Ask your client if this is a service they want to charge for. In our case, it’s free to list a dress, but think of this data like a classifieds section, and consider the revenue opportunities a web app might present for your client.
在“ 客户选项”部分中，您可以管理内容的到期时间，文件上载和电子商务选项。 询问您的客户这是否是他们要收费的服务。 在我们的案例中，可以免费列出礼服，但可以将这些数据视为分类部分，并考虑网络应用可能为您的客户带来的收入机会。
Next, click on the Allow File Upload checkbox and then select the directory you made earlier to contain uploaded images. Finally, I’m going to use the existing Shopping Cart template we made back in this first article in the series. After that is set up, let’s move on to adding fields by clicking Next.
接下来，单击“ 允许文件上传”复选框，然后选择您之前创建的包含上传图像的目录。 最后，我将使用我们在本系列的第一篇文章中回到的现有购物车模板 。 设置完之后，让我们通过单击Next继续添加字段。
Custom Fields
自定义字段
This is the screen where you build the heart of your web app. Add a field for each data element in your list. After you type in the name of the field, select the type of field and determine if it is optional or mandatory. To add the field to your app, click Save Field. Fields in the app can be added or removed over time, but you’ll have to update pages based on the web app after you make a modification.
这是构建Web应用程序核心的屏幕。 为列表中的每个数据元素添加一个字段。 输入字段名称后，选择字段类型并确定它是可选字段还是必填字段。 要将字段添加到您的应用中，请点击保存字段 。 该应用程序中的字段可以随着时间的推移添加或删除，但是您必须在进行修改后根据该Web应用程序更新页面。
Field types are very versatile for creating your app; you can have text inputs for strings like names, text boxes for longer chunks of text, lists with options to select from, date/time data types, and image data types. You can even have a data source you already created as a data type — that can be very powerful.
字段类型对于创建应用非常有用。 您可以为字符串(例如名称)输入文本，输入文本框(输入更长的文本块)，带有可供选择的选项的列表，日期/时间数据类型和图像数据类型。 您甚至可以拥有一个已经创建为数据类型的数据源，它可能非常强大。
After you create your set of fields, click Next, and you can customize the look and feel of the templates generated for the web app. Each web app comes with three templates for each interaction: list, details, and edit. List is the data that will be returned for each item from browsing or searching against the data in your app. Details is the look of an individual item’s page. Edit is the data entry form to edit the data in an item’s listing. For most apps, List and Details are the first templates you’ll want to work with.
创建字段集后，单击“下一步”，然后可以自定义为Web应用程序生成的模板的外观。 每个Web应用程序都为每个交互提供三个模板：列表，详细信息和编辑。 列表是通过浏览或搜索应用程序中的数据将为每个项目返回的数据。 详细信息是单个项目页面的外观。 编辑是数据输入表单，用于编辑项目列表中的数据。 对于大多数应用程序，“ 列表”和“ 详细信息”是您要使用的首批模板。
Before we start to customize, let’s make some test data so that we can see what we’re working with. Click on View Web App Items on the right-hand navigation column. You’ll see you have no items yet. Click on Create a New Web App Item.
在开始自定义之前，让我们进行一些测试数据，以便我们可以看到正在使用的内容。 单击右侧导航列上的“ 查看Web应用程序项 ”。 您会看到您还没有物品。 单击“ 创建新的Web应用程序项” 。
Enter some data into the form and submit it. If you want, add a few items for some test data – you can always delete them before going live.
在表单中输入一些数据并提交。 如果需要，可以为一些测试数据添加一些项目–您始终可以在上线之前将其删除。
Customizing Your Template
自定义您的模板
Let’s go back to customize the look and feel of the web app we’ve created. Hover over the web apps link in the menu above and click on Manage Web Apps. Click on the web app name to get back into your app, and click on Customize Web App Layout to return to the List template. Your list will show two data elements from your item by default: the {tag_counter}, which counts the number of items listed, and the {tag_name}, which will generate a link to the detail page using the text in the Name field.
让我们返回来自定义我们创建的Web应用程序的外观。 将鼠标悬停在上方菜单中的网络应用链接上，然后点击管理网络应用 。 单击Web应用程序名称返回到您的应用程序，然后单击Customize Web App Layout返回到“ 列表”模板。 默认情况下，列表将显示项目中的两个数据元素： {tag_counter}(对列出的项目数进行计数)和{tag_name}(将使用“名称”字段中的文本生成到详细信息页面的链接)。
Note: Go back to Part 1 in the series to learn more about Adobe Business Catalyst custom tags.
注意：返回本系列的第1部分 ，以了解有关Adobe Business Catalyst自定义标签的更多信息。
I want to add a few data elements to the listing to anticipate what customers want to choose from. Using the Tag Insert drop-down, I can find the tags corresponding to all the fields I added earlier. I’m going to use the name of the item, the age of the dancer, and the price, since those are the most basic fields used to filter the items. I’ll add a little text to label the data that’s going to show up in place of the tags.
我想在列表中添加一些数据元素，以预测客户想要选择的内容。 使用“ 标签插入”下拉菜单，可以找到与之前添加的所有字段相对应的标签。 我将使用商品的名称，舞者的年龄和价格，因为这些是用于过滤商品的最基本的字段。 我将添加一些文本来标记将要显示的数据来代替标签。
In addition, you can toggle to the HTML view to get much more fine-grained control over the look and feel of the listing.
另外，您可以切换到HTML视图，以对列表的外观进行更细粒度的控制。
Adding a Module to a Page
将模块添加到页面
If you recall our last article, Adobe Business Catalyst makes it very easy to add dynamic functionality to the pages and templates that you create. Let’s create a listings page for the web app and start our Dress Market.
如果您还记得我们的上一篇文章 ，Adobe Business Catalyst使您可以轻松地向所创建的页面和模板添加动态功能。 让我们为该Web应用程序创建一个列表页面，然后启动我们的服装市场。
Go to Website > Web Pages and click on Create a new Web Page. Write down the file name and page name, and determine which template to use, and what directory the file should reside in.
转到网站>网页 ，然后单击创建新网页 。 写下文件名和页面名，并确定要使用的模板以及文件应位于的目录。
Now go to the Action Box and click on the Add modules to web page button. The Modules pane will load and you can scroll down to web apps. Scroll down to Display List of Web App Items. Click on the link and then select the web app list you want to add.
现在转到“ 操作框” ，然后单击“ 将模块添加到网页”按钮。 “ 模块”窗格将加载，您可以向下滚动到Web应用程序。 向下滚动以显示“ Web App项目列表” 。 单击链接，然后选择要添加的Web应用程序列表。
From there, you could select an additional filter or just list all items. We’ll list all items on this page. Preview the page to see the list of items you’ve created so far. Now click on one of the links and you’ll go to the item details page.
从那里，您可以选择其他过滤器或仅列出所有项目。 我们将在此页面上列出所有项目。 预览页面以查看您到目前为止创建的项目列表。 现在，单击链接之一，您将转到项目详细信息页面。
This is the page “out of the box” — before I add some of my own HTML and CSS to clean up the layout.
这是“开箱即用”的页面-在添加一些自己HTML和CSS来清理布局之前。
Let’s take stock of what we’ve done so far:
让我们回顾一下到目前为止所做的事情：
- Web app is created and has test data 网络应用已创建并具有测试数据
- Listing page has been created and the Web App module was added to the page 清单页面已创建，并且Web App模块已添加到页面
- Detail page is working 详细页面正在运行
As you know, there’s a lot of tuning to do now — you’ll have to design how you want each of these pages to look, and then you’ll need to write the CSS to execute the design (or use some of the pre-built styles already available).
如您所知，现在有很多调整要做–您必须设计您希望每个页面的外观，然后您需要编写CSS来执行设计(或使用一些内置样式已可用)。
In addition, you’ll want to add some links from your main nav, which will mean editing some templates in this particular design. I’m not going to spend much time on that now, since we’ve covered how to get down to the very fine-grained control over look and feel using Adobe Business Catalyst. If you need a refresher for any of the topics covered earlier in the series, follow these links for Part 1 or Part 2.
此外，您需要从主导航添加一些链接，这意味着在此特定设计中编辑一些模板。 我现在不会花很多时间，因为我们已经介绍了如何使用Adobe Business Catalyst对外观进行非常精细的控制。 如果您需要复习本系列前面讨论的任何主题，请遵循这些第1 部分或第2 部分的链接。
Going back to our initial user story, we’ve created the underlying ability for Jane to list her daughter’s dress. Yet, the site doesn’t have all the capabilities we’ll need to allow customers to start uploading items.
回到我们最初的用户故事，我们创建了Jane列出女儿的衣服的基本功能。 但是，该网站不具备允许客户开始上载项目所需的全部功能。
Create a Submission Page
创建提交页面
Let’s create a new page and call it Dress Market Submission. We’re also going to ensure that the Enabled button is clicked; that will ensure that the functionality we’re adding to the page works correctly. Let’s add the submission module, so that we have our customer-facing data entry page set up.
让我们创建一个新页面并将其命名为Dress Market Submission 。 我们还将确保单击“ 启用”按钮； 这样可以确保我们添加到页面的功能正常运行。 让我们添加提交模块，以便我们设置面向客户的数据输入页面。
Go to the Action Box and click on the Add modules to page link; then scroll down the modules list and click on the Web App link. Click on the Web Apps Input Form for Customers. Select the web app that you want to create a submission page for, and then click insert.
转到操作框 ，然后单击将模块添加到页面链接； 然后向下滚动模块列表，然后单击Web App链接。 单击“客户的Web Apps输入表单” 。 选择要为其创建提交页面的Web应用程序，然后单击“插入”。
You can preview the page, make some tweaks to it, and generate more test data, if you like.
您可以预览页面，对其进行一些调整，并根据需要生成更多测试数据。
Securing the Submission Form
确保提交表格
A web app like this is a great opportunity for your clients to collect information about their customers. By making the listings open to the public, traffic increases on the site; there’s value for the people listing their dresses in the online market, as well as for the school.
像这样的网络应用程序是您的客户收集有关其客户信息的绝佳机会。 通过向公众开放列表，网站上的流量会增加； 对于在网上市场上列出自己的礼服的人们以及学校来说，这都是有价值的。
But the ability for customers to generate site content should be gated in some way. Most sites enforce that people should create an account and be logged in to post material to a site — we’re going to add that capability to our site now.
但是，应该以某种方式限制客户生成网站内容的能力。 大多数网站都要求人们创建一个帐户并登录才能将材料发布到网站上-我们现在将其添加到我们的网站中。
Creating a Secure Zone
创建一个安全区域
In Adobe Business Catalyst, there are many levels of user roles. There are system users like you and your client (we explored how to limit different user role permissions in Part 2). You both log in to the main admin section and use the Business Catalyst interface to manage, modify, enhance, and update the site.
在Adobe Business Catalyst中，有许多级别的用户角色。 有像您和您的客户端这样的系统用户(我们在第2部分中探讨了如何限制不同的用户角色权限)。 您都登录到主要的admin部分，并使用Business Catalyst界面来管理，修改，增强和更新站点。
Your customers will be given tools that reside within the look and feel of the customer’s website. From the Adobe Business Catalyst terminology, they will be treated more like “subscribers” to the site, though they’ll have permissions we grant them. In this case, it will be permission to access particular pages like the Submission page.
您的客户将获得位于客户网站外观内的工具。 从Adobe Business Catalyst术语来看，他们将被视为站点的“订户”，尽管他们将拥有我们授予他们的权限。 在这种情况下，将允许访问特定页面，例如“ 提交”页面。
Requiring a person to be logged in to your site to do certain tasks — called authentication — requires us to do some more planning. We’ll need to determine which pages in the site require a customer to be logged in, and define what information is necessary to create an account. We’ll then have to create a registration page and login section, and then knit the whole user experience together. Take some time to plan out the information you’ll need to collect to create an account:
要求一个人登录到您的网站来执行某些任务(称为身份验证 )需要我们做一些进一步的计划。 我们需要确定网站中的哪些页面需要客户登录，并定义创建帐户所需的信息。 然后，我们必须创建一个注册页面和登录部分，然后将整个用户体验结合在一起。 花一些时间来计划创建帐户所需的信息：
- username 用户名
- password 密码
- first name 名字
- last name 姓
- title 标题
- home phone 家庭电话
- email address 电子邮件地址
This will be important in a few minutes. But first let’s take stock of everything we’ll do to set up authentication:
这将在几分钟内变得很重要。 但是首先让我们评估一下设置身份验证的所有工作：
- creating the zone 创建区域
- adding the submission page to the secure zone 将提交页面添加到安全区域
- creating the registration web form 创建注册网站表格
- adding the registration form to a page 将注册表单添加到页面
- adding login to the registration page 将登录名添加到注册页面
- email confirmation message 电子邮件确认消息
It may seem like a lot, but the tools in Adobe Business Catalyst make it easy to add security to your site in just a few minutes, with no coding required.
看起来似乎很多，但是Adobe Business Catalyst中的工具使您可以在短短几分钟内轻松地为您的网站添加安全性，而无需编写代码。
Create the Secure Zone
创建安全区域
Go to Website > Secure Zones and create a new zone. In the first step, you’ll name the zone and select the page to land on after successfully logging in. I’ll create one for the Dress Marketplace, and select the Submissions page as the landing page.
转到网站>安全区域并创建一个新区域。 第一步，您将命名区域并成功登录后选择要着陆的页面。我将为Dress Marketplace创建一个区域，然后选择“ 提交”页面作为着陆页面。
Next you’ll have to add the Submissions page to the Secure Zone. Select Web Pages in the drop-down; select the Submissions page in the list of assets on the left, and click the single right arrow to move it to the right.
接下来，您必须将“ 提交”页面添加到“ 安全区域” 。 在下拉菜单中选择网页 ； 在左侧资产列表中选择“ 提交”页面，然后单击单个向右箭头将其移至右侧。
This is similar to the way we created permissions for users back in Part 2. You can secure more than just pages; you can secure other types of content like blogs and forums.
这类似于我们在第2部分中为用户创建权限的方式。 您不仅可以保护页面，还可以保护页面。 您可以保护其他类型的内容，例如博客和论坛。
At this point, only logged in customers can get to the Submissions page. If you try to navigate there, you will be blocked and prompted to login.
此时，只有登录的客户才能进入“ 提交”页面。 如果尝试在那里导航，将被阻止并提示您登录。
Oops, you don’t have an account for this zone! Okay, let’s make the registration and login page, so that we can get to the Submissions page.
糟糕，您没有此区域的帐户！ 好的，让我们进入注册和登录页面，以便我们可以进入“ 提交”页面。
Create the Registration and Login Page
创建注册和登录页面
First, let’s create the registration form in Modules > Web Forms. Let’s use the new web form builder to create the form — it has a very intuitive interface to add fields to the form. First name the form and use the Security Zone drop-down to link the form to the zone. We’re not going to add workflow in this example, so leave that set at Don’t use a workflow.
首先，让我们在Modules> Web Forms中创建注册表单 。 让我们使用新的Web表单构建器来创建表单-它具有非常直观的界面，可以向表单中添加字段。 首先命名表单，然后使用“ 安全区域”下拉列表将表单链接到该区域。 在此示例中，我们不会添加工作流程，因此请将其设置为不要使用工作流程 。
Earlier in the planning process, you determined which fields would be used in the registration form, so let’s find them on the Form Builder. Everything we need is in the Contacts tab, but we can add custom fields and even CAPTCHA image validation to the registration scheme if we wanted to.
在计划过程的早期，您确定了将在注册表单中使用的字段，因此让我们在Form Builder上找到它们。 我们需要的所有内容都在“ 联系人”选项卡中，但是如果需要，我们可以向注册方案添加自定义字段，甚至包括验证码图像验证。
As you add fields from the left, they show up in the right column. You can preview the form, and even add it to a web page from here.
当您从左侧添加字段时，它们将显示在右侧列中。 您可以预览表单，甚至可以从此处将其添加到网页。
We’re going to need to create a page for our registration form. Create the page and add the registration form from the Add Modules tool, or come back to the Web Form section and add it with a one-click insertion.
我们将需要为我们的注册表创建一个页面。 创建页面并通过“ 添加模块”工具添加注册表单，或者返回到“ Web表单”部分，并一键插入进行添加。
Save and Publish Your New Registration Page
保存并发布您的新注册页面
To access the secure content, the first time through users will need to create a new account, but after that, they’ll just log in and be on their way.
要访问安全内容，第一次通过用户将需要创建一个新帐户，但是此后，他们将只登录并继续使用。
Now we need to add a login form to the page. Open the page from the Web Pages section, click on Add a module, and select the Secure Zone section. Select the Secure Zone login form, choose your zone from the drop-down, and insert it in the page.
现在，我们需要在页面上添加一个登录表单。 从“ 网页”部分打开页面，单击“ 添加模块” ，然后选择“ 安全区域”部分。 选择“ 安全区域”登录表单，从下拉列表中选择您的区域，然后将其插入页面。
As before, you can style the look and feel of the form as needed to make it look clean and well-integrated to your design. Once you are ready, save and publish the page. After cleaning up the HTML and CSS a bit, you’ll have a working registration page.
和以前一样，您可以根据需要对表单的外观和样式进行样式设置，以使其看起来干净且与您的设计很好地集成在一起。 准备就绪后，保存并发布页面。 稍微整理一下HTML和CSS之后，您将获得一个有效的注册页面。
In order to make it a little more polished, let’s add some more dynamic content for logged in users. Open the Submissions page, access the module manager, and click on the Secure Zone.
为了使它更加优美，让我们为登录用户添加更多动态内容。 打开“ 提交”页面，访问模块管理器，然后单击“ 安全区域” 。
There are a number of pre-built tools that anticipate items you would want to add to an authenticated user experience. I’m going to add the line “[name] is logged in. Click here to log out.”
有许多预构建的工具可以预测您想要添加到经过身份验证的用户体验中的项目。 我要添加“ [name]已登录。单击此处注销”行。
This is actually the combination of two modules: Customer First Name and Link to log out of a secure zone. Play around with these tools to create an even richer experience for your users.
这实际上是两个模块的组合：“ 客户名字”和“ 退出安全区域”的链接 。 使用这些工具可以为您的用户创造更丰富的体验。
Connecting the Dots
连接点
Okay, you have the registration/login page, and your Submissions page is restricted to logged in customers. How do we get there? I added a link from the List page to drive customers to create an account.
好的，您拥有注册/登录页面，并且您的提交页面仅限于登录客户。 我们怎么去那里？ 我从“ 列表”页面添加了一个链接，以吸引客户创建帐户。
Adding Search
添加搜索
That covers the ability to browse the listings, but as the Marketplace fills up with content, people may want to search to filter the results they receive. Adobe Business Catalyst has pre-built modules to let you search the web app data generated on your site.
这涵盖了浏览列表的功能，但是随着市场上内容的充斥，人们可能需要搜索以过滤接收到的结果。 Adobe Business Catalyst具有预构建的模块，可让您搜索在站点上生成的Web应用程序数据。
Go to Web Site > Web Pages and open your listings page. Add some HTML to separate the Search section from the Browse section using a <div>; for each one (we’ll add some jQuery to this in a minute). Use the Module Manager to insert a Web App Search Form into the new div you’ve created. Select the Dress Listings from the drop-down and insert the module.
转到网站> 网页，然后打开您的列表页面。 添加一些HTML，以使用<div>将“搜索”部分与“浏览”部分分开； 每一个(我们将在一分钟内添加一些jQuery)。 使用模块管理器将Web App搜索表单插入到您创建的新div 。 从下拉列表中选择着装清单 ，然后插入模块。
Initially, the search form will give you all the fields to filter against.
最初，搜索表单将为您提供所有要过滤的字段。
You can customize the number of fields, HTML, and CSS to meet your needs.
您可以自定义字段，HTML和CSS的数量以满足您的需求。
Now you’ve got a simple search form implemented, but the page is a little clunky, having to scroll up and down to get to browse and search. Let’s add a little jQuery to collapse the divs, and use an effect to open and close the divs that exposes or hides the search or browse capabilities.
现在，您已经实现了一个简单的搜索表单，但是页面有些笨拙，必须上下滚动才能浏览和搜索。 让我们添加一些jQuery折叠div，并使用效果打开和关闭div，以显示或隐藏搜索或浏览功能。
Add Some jQuery
添加一些jQuery
Creating a fulfilling and intuitive user experience will encourage your customers to drive through the site and use the capabilities you spend time implementing. jQuery is a strong JavaScript framework that is easy to implement, and gives you powerful tools to create an interactive experience on your site.
创建充实而直观的用户体验将鼓励您的客户浏览网站并使用您花费时间实施的功能。 jQuery是一个易于实施的强大JavaScript框架，并为您提供了强大的工具来在您的网站上创建交互式体验。
While we like to show how easy it is to use Adobe Business Catalyst to add functionality without coding, this takes us in the other direction: showing how a platform this powerful gives you the ability to dig in and add the libraries you want.
尽管我们想展示使用Adobe Business Catalyst无需编码即可添加功能的容易程度，但这又使我们朝着另一个方向发展：展示了这种功能强大的平台如何使您能够挖掘和添加所需的库。
We’ll do a little light coding in JavaScript and HTML to implement the library and use the Accordion effect in jQuery UI; I think you’ll find this is a simple introduction to adding jQuery to your Adobe Business Catalyst site. If you are a jQuery Ninja, the platform exposes JavaScript handlers in many modules and forms. so that you can easily use Ajax and other techniques to create a rich interactive user experience.
我们将用JavaScript和HTML进行一些简单的编码来实现该库，并在jQuery UI中使用Accordion效果。 我想您会发现这是将jQuery添加到Adobe Business Catalyst网站的简单介绍。 如果您是jQuery Ninja，那么平台会以许多模块和形式公开JavaScript处理程序。 这样您就可以轻松地使用Ajax和其他技术来创建丰富的交互式用户体验。
First of all, add the jQuery libraries to your application by linking to the scripts from within your templates so the libraries are accessible all over your site. Most browsers will cache the file after it’s first requested, so you won’t be adding download time, but you will need to make the call so that the scripts are used for each page.
首先，通过链接模板中的脚本将jQuery库添加到您的应用程序中，以便可以在您的整个站点上访问这些库。 大多数浏览器在首次请求文件后都会缓存该文件，因此您不会增加下载时间，但是您需要进行调用，以便将脚本用于每个页面。
You can upload the scripts to your site or link to them externally. I’ll upload the latest jQuery and jQuery UI libraries:
您可以将脚本上传到您的站点，也可以从外部链接到它们。 我将上传最新的jQuery和jQuery UI库：
<script src="/JavaScripts/jquery-1.4.2.min.js"></script>
<script src="/JavaScripts/jquery-ui-1.8.6.custom.min.js"></script>I’m going to use the accordion effect to close and open the divs when a customer clicks on the heading Search or Browse. First, I need to set up my HTML to create headers and divs to contain my modules. In the sample code below, I’ve cut out the search form for space:
当客户单击标题Search或Browse时，我将使用手风琴效果来关闭和打开div。 首先，我需要设置HTML以创建包含模块的标头和div。 在下面的示例代码中，我剪切了空间搜索表单：
<div class="dress_market">
<div>
<h3><a href="#">Search the listings</a></h3>
<div id="search">
<!-- search form content removed for space -->
</div>
<a href="#">Browse all listings</a></h3>
<div id="browse">
{module_webapps,8211,a,}</div>
</div>
<!-- close accordion div -->
</div>
<!-- close dress_market div -->
</div>I have a wrapping div with a class called “dress_market” which l use throughout the dress_market to apply common CSS styles. Within that I have a div with an id=”accordion” — that will wrap both the search and browse divs. The headers contain hrefs with an anchor tag that will give me a click event to bind the accordion action.
我有一个包装的div，其中包含一个名为“ dress_market”的类，在整个dress_market中，我将使用它来应用常见CSS样式。 在其中，我有一个id为“ accordion”的div-将包装搜索和浏览div。 标题包含带有锚标记的href，它将为我提供一个单击事件以绑定手风琴动作。
My script will contain the JavaScript to execute the accordion:
我的脚本将包含执行手风琴JavaScript：
<script>
$(function() {
$( "#accordion" ).accordion({
autoheight: false,
collapsible: true,
alwaysOpen: false
});
});
</script>Place this script at the bottom of the page so that the JavaScript is evaluated and executed after the page has loaded. You can also use the document).ready(function(); method to ensure jQuery is executed after the page has fully loaded.
将此脚本放在页面底部，以便在页面加载后评估和执行JavaScript。 您还可以使用document).ready(function();方法来确保页面完全加载后执行jQuery。
When you click on the Browse all listings link, the accordion closes the top div and opens the browse div in the same page.
当您单击浏览所有列表链接时，手风琴将关闭顶部div并在同一页面中打开浏览div。
There you go. If you are feeling adventurous, the search form comes preloaded with a tag loading the search results {module_webapresults}. Use jQuery to highlight the search results returned.
妳去 如果您喜欢冒险，可以在搜索表单中预加载一个标签，以加载搜索结果{module_webapresults} 。 使用jQuery突出显示返回的搜索结果。
Full documentation on this library can be on the jQuery UI.
有关此库的完整文档，请参见jQuery UI 。
Email Confirmation
邮件确认
In addition to connecting the site pages, you’ll want to customize the email messages that new registered users receive, as well as the messages they receive after creating a new item in the marketplace. Registration email can be configured from the Admin menu by selecting Customize System email and then selecting the Secure Zone Login Details.
除了连接站点页面之外，您还需要自定义新注册用户收到的电子邮件以及他们在市场中创建新商品后收到的电子邮件。 通过选择“ 自定义系统”电子邮件 ，然后选择“ 安全区域登录详细信息”，可以从“ 管理”菜单配置注册电子邮件。
You can customize the email sent after submitting a new item by clicking on Manage Web App, selecting your new app, and then clicking on Set up Auto Responders. We don’t need to spend too much detail on this — you can customize the text and have access to dynamic tags to add more data to the email.
您可以自定义提交新项目后发送的电子邮件，方法是：单击“ 管理Web应用程序” ，选择新应用程序，然后单击“ 设置自动响应器” 。 我们不需要为此花费太多的细节-您可以自定义文本并可以访问动态标签以向电子邮件中添加更多数据。
Now let’s recap: We’ve created an app, the listings page, the details page, and a submissions page. We’ve restricted access to only logged in customers, created a registration/login page, customized the email messaging, and knitted it all together with appropriate links. Not bad for one day, hmm? All without having to create custom code. Now that you’ve got a new app, how about checking out some of the activity it’s generating?
现在让我们来回顾一下：我们已经创建了一个应用程序，列表页面，详细信息页面和提交页面。 我们将访问权限限制为仅登录的客户，创建了注册/登录页面，自定义了电子邮件消息，并将其与适当的链接结合在一起。 一天还不错，嗯？ 所有这些都无需创建自定义代码。 现在，您已经有了一个新的应用程序，如何检查它正在生成的一些活动？
User Activity Reports
用户活动报告
Remember that one of the main ways to build business is to increase the interactions and transactions performed by your existing customers. It’s critical to build marketing to attract new customers, but once you’ve got them, keep them interested with newsletters, special offers, and other relevant communications.
请记住，建立业务的主要方法之一是增加现有客户之间的互动和交易。 建立营销以吸引新客户是至关重要的，但是一旦吸引了他们，就让他们对新闻通讯，特价商品和其他相关通信感兴趣。
Adobe Business Catalyst provides robust and intuitive tools to mine the data that you collect from your web apps, so you and your clients can grow their online business. In addition to the activity data you’ll see in the admin section’s dashboard, you can build custom reports about the activity in the online Dress Market.
Adobe Business Catalyst提供了强大而直观的工具来挖掘您从Web应用程序收集的数据，因此您和您的客户可以发展其在线业务。 除了您将在管理部分的仪表板中看到的活动数据之外，您还可以在在线服装市场上构建有关活动的自定义报告。
Go to the Reports section and click on Create a Customer Report. Select the bottom item to build a report for Customers and Web Apps; then click Next.
转到“ 报告”部分，然后单击“ 创建客户报告” 。 选择最下面的项目以为客户和Web应用程序生成报告； 然后单击下一步 。
Select the fields you want in the report. I’ve selected a few based on the type of app we made.
在报告中选择所需的字段。 我根据我们制作的应用类型选择了一些。
Next, tell it what data to filter against.
接下来，告诉它要过滤哪些数据。
In the bottom section called Filter by your own customer CRM Forms and Fields, select your web app in the drop-down. If we leave Display all fields selected, you’ll see a report that filters all fields by the criteria in the first screen. Due to your test data, that may end up as an intersection of one row of data. Instead, leave it unchecked and then click Generate Report.
在名为“ 按您自己的客户CRM表单和字段过滤”的底部，在下拉菜单中选择您的Web应用程序。 如果我们将“ 显示所有字段”保留为选中状态，则您将在第一个屏幕中看到一个按条件过滤所有字段的报告。 由于您的测试数据，最终可能会成为一行数据的交集。 相反，请不要选中它，然后单击“ 生成报告” 。
You should see a list of all the items submitted, by whom and on what date. Now click next to name and save the report.
您应该看到所有提交的项目的清单，列出了谁以及在什么日期提交。 现在，单击名称旁边的并保存报告。
This simple activity report is the first step to generating marketing lists. Think of the opportunities for cross selling!
这个简单的活动报告是生成营销列表的第一步。 考虑交叉销售的机会！
Now you have a community of highly motivated users, creating accounts on your site and arriving without additional marketing. You could add dress-making and related products to your online store, segment the reporting, and send targeted ads to these customers.
现在，您拥有了一群积极进取的用户，可以在您的网站上创建帐户，并且无需额外营销即可到达。 您可以将制衣及相关产品添加到您的在线商店中，对报告进行细分，然后向这些客户发送定向广告。
You could create newsletters especially for this segment of your customer base and increase traffic to other sections of your site to grow your business.
您可以专门为客户群的这一部分创建新闻通讯，并增加到网站其他部分的访问量，以发展业务。
Limitations of What We’ve Achieved
我们所取得成就的局限性
It’s important to note that there are some limitations to what we’ve just built and what you can build with Business Catalyst web apps. For example, we won’t be able to enable the purchasing of web app items. While Business Catalyst web apps are very powerful, it’s important that you do a little research to find out what’s possible and what’s not.
重要的是要注意，我们刚刚构建的内容以及使用Business Catalyst Web应用程序可以构建的内容都存在一些限制。 例如，我们将无法启用网络应用项目的购买。 尽管Business Catalyst网络应用程序功能非常强大，但重要的是，您需要进行一些研究以找出可能的和不可能的。
Summary
摘要
In this article, we’ve explored how Adobe Business Catalyst can help you to unleash the most powerful asset your client has: customers.
在本文中，我们探讨了Adobe Business Catalyst如何帮助您释放客户拥有的最强大资产：客户。
User-generated content can take a website from being a place where customers expect only to receive information, into a tool that they use to exchange information. Adobe Business Catalyst’s finely controlled web app management capabilities make this potential transformation a reality.
用户生成的内容可以将网站从客户仅希望接收信息的地方带入他们用来交换信息的工具中。 Adobe Business Catalyst的精细控制的Web应用程序管理功能使这种潜在的转变成为现实。
The best part about this kind of tool is that as more customers use it and find out about it, the more it grows. User-generated content is a powerful way to extend the reach of your online business, and Adobe Business Catalyst is a great way to harness that power.
这种工具最好的部分是，随着越来越多的客户使用它并对其进行了解，它会越来越多。 用户生成的内容是扩展在线业务范围的有力方法，而Adobe Business Catalyst是利用这种功能的好方法。
Now you can tackle the short quiz we’ve compiled to see how much you’ve absorbed from this article.
现在您可以解决我们编写的简短测验，以了解您从本文中学到了多少。
This tutorial has been made possible by the support of Adobe. In cooperation with Adobe and independently written by SitePoint, we strive to work together to develop the content that’s most useful and relevant to you—the readers.
在Adobe的支持下，本教程成为可能。 与Adobe合作并由SitePoint独立编写，我们致力于共同开发最有用和与您(读者)最相关的内容。
翻译自: https://www.sitepoint.com/introduction-to-adobe-business-catalyst-part-3/
sql catalyst
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
