mirror of
https://github.com/silverstripe/silverstripe-framework
synced 2024-10-22 14:05:37 +02:00
Tutorials review and update image path
This commit is contained in:
parent
d01c8d7990
commit
cdae3fadea
@ -154,7 +154,7 @@ Two other important folders to set the permissions on are `assets` and `silverst
|
|||||||
|
|
||||||
You will need to give **Modify** permission to **IUSR** user. To do it right click the folder and choose **Properties**. Then open the security tab, press **Edit** and add the **IUSR** user to the list by clicking the **Add** button. Afterwards tick **Modify** under **Allow** for that user. Repeat these steps for each folder.
|
You will need to give **Modify** permission to **IUSR** user. To do it right click the folder and choose **Properties**. Then open the security tab, press **Edit** and add the **IUSR** user to the list by clicking the **Add** button. Afterwards tick **Modify** under **Allow** for that user. Repeat these steps for each folder.
|
||||||
|
|
||||||
![](_images/iis7-iusr-permissions.jpg)
|
![](/_images/iis7-iusr-permissions.jpg)
|
||||||
|
|
||||||
## Install SilverStripe
|
## Install SilverStripe
|
||||||
|
|
||||||
|
@ -40,11 +40,11 @@ a beta version of the software)
|
|||||||
|
|
||||||
## Screenshots
|
## Screenshots
|
||||||
|
|
||||||
![](_images/webpi-2-a-silverstripe-choice.jpg)
|
![](/_images/webpi-2-a-silverstripe-choice.jpg)
|
||||||
![](_images/webpi-2-b-dependencies.jpg)
|
![](/_images/webpi-2-b-dependencies.jpg)
|
||||||
![](_images/webpi-2-c-downloading-and-installaing.jpg)
|
![](/_images/webpi-2-c-downloading-and-installaing.jpg)
|
||||||
![](_images/webpi-2-d-installer-questions-step1.jpg)
|
![](/_images/webpi-2-d-installer-questions-step1.jpg)
|
||||||
![](_images/webpi-2-e-installer-questions-step2.jpg)
|
![](/_images/webpi-2-e-installer-questions-step2.jpg)
|
||||||
![](_images/webpi-2-f-success-message.jpg)
|
![](/_images/webpi-2-f-success-message.jpg)
|
||||||
![](_images/webpi-2-g-silverstripe-homepage.jpg)
|
![](/_images/webpi-2-g-silverstripe-homepage.jpg)
|
||||||
![](_images/webpi-2-h-cms-interface-working.jpg)
|
![](/_images/webpi-2-h-cms-interface-working.jpg)
|
||||||
|
@ -50,7 +50,7 @@ Example Forum:
|
|||||||
| `forum/code` | PHP code for model and controller (subdirectories are optional) |
|
| `forum/code` | PHP code for model and controller (subdirectories are optional) |
|
||||||
| ... | ... |
|
| ... | ... |
|
||||||
|
|
||||||
![](_images/modules_folder.jpg)
|
![](/_images/modules_folder.jpg)
|
||||||
|
|
||||||
### Module documentation
|
### Module documentation
|
||||||
|
|
||||||
@ -73,7 +73,7 @@ Example Forum Documentation:
|
|||||||
| `forum/docs/en/` | English documentation |
|
| `forum/docs/en/` | English documentation |
|
||||||
| `forum/docs/en/index.md` | Documentation homepage. Should provide an introduction and links to remaining docs |
|
| `forum/docs/en/index.md` | Documentation homepage. Should provide an introduction and links to remaining docs |
|
||||||
| `forum/docs/en/Getting_Started.md` | Documentation page. Naming convention is Uppercase and underscores. |
|
| `forum/docs/en/Getting_Started.md` | Documentation page. Naming convention is Uppercase and underscores. |
|
||||||
| `forum/docs/en/_images/` | Folder to store any images or media |
|
| `forum/docs/en//_images/` | Folder to store any images or media |
|
||||||
| `forum/docs/en/Some_Topic/` | You can organise documentation into nested folders. Naming convention is Uppercase and underscores. |
|
| `forum/docs/en/Some_Topic/` | You can organise documentation into nested folders. Naming convention is Uppercase and underscores. |
|
||||||
|`forum/docs/en/04_Some_Topic/00_Getting_Started.md`|Structure is created by use of numbered prefixes. This applies to nested folders and documentations pages, index.md should not have a prefix.|
|
|`forum/docs/en/04_Some_Topic/00_Getting_Started.md`|Structure is created by use of numbered prefixes. This applies to nested folders and documentations pages, index.md should not have a prefix.|
|
||||||
|
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
title: Building a basic site
|
||||||
summary: An overview of the SilverStripe installation and an introduction to creating a web page.
|
summary: An overview of the SilverStripe installation and an introduction to creating a web page.
|
||||||
|
|
||||||
# Tutorial 1 - Building a Basic Site
|
# Tutorial 1 - Building a Basic Site
|
||||||
@ -17,9 +18,9 @@ templates - one for the home page, and one for the rest of the site.
|
|||||||
|
|
||||||
## Installation
|
## Installation
|
||||||
|
|
||||||
You need to [download the SilverStripe software](http://www.silverstripe.org/stable-download) and install it to your local machine or to a webserver.
|
You need to [download the SilverStripe software](http://www.silverstripe.org/software/download) and install it to your local machine or to a webserver.
|
||||||
|
|
||||||
For more information about installing and configuring a webserver read the [Installation instructions and videos](../installation).
|
For more information about installing and configuring a webserver read the [Installation instructions and videos](/getting_started/installation).
|
||||||
|
|
||||||
This tutorial uses the SilverStripe CMS default theme 'Simple' which you will find in the themes folder. We will investigate the existing template files that make up the theme as well as create some new files to build upon the theme.
|
This tutorial uses the SilverStripe CMS default theme 'Simple' which you will find in the themes folder. We will investigate the existing template files that make up the theme as well as create some new files to build upon the theme.
|
||||||
|
|
||||||
@ -45,13 +46,13 @@ When designing your site you should only need to modify the *mysite*, *themes* a
|
|||||||
|
|
||||||
### User Interface Basics
|
### User Interface Basics
|
||||||
|
|
||||||
![](_images/tutorial1_cms-basic.jpg)
|
![](/_images/tutorial1_cms-basic.jpg)
|
||||||
|
|
||||||
The CMS is the area in which you can manage your site content. You can access the cms at http://localhost/your_site_name/admin (or http://yourdomain.com/admin if you are using your own domain name). You
|
The CMS is the area in which you can manage your site content. You can access the cms at http://localhost/your_site_name/admin (or http://yourdomain.com/admin if you are using your own domain name). You
|
||||||
will be presented with a login screen. Login using the details you provided at installation. After logging in you
|
will be presented with a login screen. Login using the details you provided at installation. After logging in you
|
||||||
should see the CMS interface with a list of the pages currently on your website (the site tree). Here you can add, delete and reorganize pages. If you need to delete, publish, or unpublish a page, first check "multi-selection" at the top. You will then be able to perform actions on any checked files using the "Actions" dropdown. Clicking on a page will open it in the page editing interface pictured below (we've entered some test content).
|
should see the CMS interface with a list of the pages currently on your website (the site tree). Here you can add, delete and reorganize pages. If you need to delete, publish, or unpublish a page, first check "multi-selection" at the top. You will then be able to perform actions on any checked files using the "Actions" dropdown. Clicking on a page will open it in the page editing interface pictured below (we've entered some test content).
|
||||||
|
|
||||||
![](_images/tutorial1_cms-numbered.jpg)
|
![](/_images/tutorial1_cms-numbered.jpg)
|
||||||
|
|
||||||
1. This menu allows you to move between different sections of the CMS. There are four core sections - "Pages", "Files", "Users" and "Settings". If you have modules installed, they may have their own sections here. In this tutorial we will be focusing on the "Pages" section.
|
1. This menu allows you to move between different sections of the CMS. There are four core sections - "Pages", "Files", "Users" and "Settings". If you have modules installed, they may have their own sections here. In this tutorial we will be focusing on the "Pages" section.
|
||||||
2. The breadcrumbs on the left will show you a direct path to the page you are currently looking at. You can use this path to navigate up through a page's hierarchy. On the left there are tabs you may use to flick between different aspects of a page. By default, you should be shown three tabs: "Content", "Settings", and "History".
|
2. The breadcrumbs on the left will show you a direct path to the page you are currently looking at. You can use this path to navigate up through a page's hierarchy. On the left there are tabs you may use to flick between different aspects of a page. By default, you should be shown three tabs: "Content", "Settings", and "History".
|
||||||
@ -59,11 +60,11 @@ should see the CMS interface with a list of the pages currently on your website
|
|||||||
* Settings - Here you set the type of page behavior, parent page, show in search, show in menu, and who can view or edit the page.
|
* Settings - Here you set the type of page behavior, parent page, show in search, show in menu, and who can view or edit the page.
|
||||||
* History - This allows you to view previous version of your page, compare, change, and revert to previous version if need be.
|
* History - This allows you to view previous version of your page, compare, change, and revert to previous version if need be.
|
||||||
3. Within the "Pages" section (provided you are in the "Content" or "Settings" tab) you can quickly move between pages in the CMS using the site tree. To collapse and expand this sidebar, click the arrow at the bottom. If you are in the history tab, you will notice the site tree has been replaced by a list of the alterations to the current page.
|
3. Within the "Pages" section (provided you are in the "Content" or "Settings" tab) you can quickly move between pages in the CMS using the site tree. To collapse and expand this sidebar, click the arrow at the bottom. If you are in the history tab, you will notice the site tree has been replaced by a list of the alterations to the current page.
|
||||||
![](_images/tutorial1_cms-numbered-3.jpg)
|
![](/_images/tutorial1_cms-numbered-3.jpg)
|
||||||
4. This section allows you to edit the content for the currently selected page, as well as changing other properties of the page such as the page name and URL. The content editor has full [WYSIWYG](http://en.wikipedia.org/wiki/WYSIWYG) capabilities, allowing you to change formatting and insert links, images, and tables.
|
4. This section allows you to edit the content for the currently selected page, as well as changing other properties of the page such as the page name and URL. The content editor has full [WYSIWYG](http://en.wikipedia.org/wiki/WYSIWYG) capabilities, allowing you to change formatting and insert links, images, and tables.
|
||||||
5. These buttons allow you to save your changes to the draft copy, publish your draft copy, unpublish from the live website, or remove a page from the draft website. The SilverStripe CMS workflow stores two copies of a page, a draft and a published copy. By having separate draft and published copies, we can preview draft changes on the site before publishing them to the live website. You can quickly preview your draft pages without leaving the CMS by clicking the "Preview" button.
|
5. These buttons allow you to save your changes to the draft copy, publish your draft copy, unpublish from the live website, or remove a page from the draft website. The SilverStripe CMS workflow stores two copies of a page, a draft and a published copy. By having separate draft and published copies, we can preview draft changes on the site before publishing them to the live website. You can quickly preview your draft pages without leaving the CMS by clicking the "Preview" button.
|
||||||
|
|
||||||
![](_images/tutorial1_cms-numbered-5.jpg)
|
![](/_images/tutorial1_cms-numbered-5.jpg)
|
||||||
|
|
||||||
### Try it
|
### Try it
|
||||||
|
|
||||||
@ -76,7 +77,7 @@ To create a new page, click the "Add New" button above the site tree.
|
|||||||
When you create a new page, you are given the option of setting the structure of the page ("Top level" or "Under another page") and the page type.
|
When you create a new page, you are given the option of setting the structure of the page ("Top level" or "Under another page") and the page type.
|
||||||
The page type specifies the templates used to render the page, the fields that are able to be edited in the CMS, and page specific behavior. We will explain page types in more depth as we progress; for now, make all pages of the type "Page".
|
The page type specifies the templates used to render the page, the fields that are able to be edited in the CMS, and page specific behavior. We will explain page types in more depth as we progress; for now, make all pages of the type "Page".
|
||||||
|
|
||||||
![](_images/tutorial1_addpage.jpg)
|
![](/_images/tutorial1_addpage.jpg)
|
||||||
|
|
||||||
**SilverStripe's friendly URLs**
|
**SilverStripe's friendly URLs**
|
||||||
|
|
||||||
@ -86,7 +87,7 @@ page in the database.
|
|||||||
|
|
||||||
Note that if you have sub-pages, changing the Top level URL field for a page will affect the URL for all sub-pages. For example, if we changed the URL field "/about-us/" to "/about-silverstripe/" then the sub-pages URLs would now be "/about-silverstripe/URL-of-subpage/" rather than "/about-us/URL-of-subpage/".
|
Note that if you have sub-pages, changing the Top level URL field for a page will affect the URL for all sub-pages. For example, if we changed the URL field "/about-us/" to "/about-silverstripe/" then the sub-pages URLs would now be "/about-silverstripe/URL-of-subpage/" rather than "/about-us/URL-of-subpage/".
|
||||||
|
|
||||||
![](_images/tutorial1_url.jpg)
|
![](/_images/tutorial1_url.jpg)
|
||||||
|
|
||||||
When you create a new page, SilverStripe automatically creates an appropriate URL for it. For example, *About Us* will
|
When you create a new page, SilverStripe automatically creates an appropriate URL for it. For example, *About Us* will
|
||||||
become *about-us*. You are able to change it yourself so that you can make long titles more usable or descriptive. For
|
become *about-us*. You are able to change it yourself so that you can make long titles more usable or descriptive. For
|
||||||
@ -181,7 +182,7 @@ Then, using a loop over the page control *Menu(1)*, we add a link to the list fo
|
|||||||
|
|
||||||
This creates the navigation at the top of the page:
|
This creates the navigation at the top of the page:
|
||||||
|
|
||||||
![](_images/tutorial1_menu.jpg)
|
![](/_images/tutorial1_menu.jpg)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -218,7 +219,7 @@ You can also create the pages elsewhere on the site tree, and drag and drop the
|
|||||||
|
|
||||||
Either way, your site tree should now look something like this:
|
Either way, your site tree should now look something like this:
|
||||||
|
|
||||||
![](_images/tutorial1_2nd_level-cut.jpg)
|
![](/_images/tutorial1_2nd_level-cut.jpg)
|
||||||
|
|
||||||
Great, we now have a hierarchical site structure! Let's look at how this is created and displayed in our template.
|
Great, we now have a hierarchical site structure! Let's look at how this is created and displayed in our template.
|
||||||
|
|
||||||
@ -288,7 +289,7 @@ to get the top level page title. In this case, we merely use it to check the exi
|
|||||||
|
|
||||||
Both the top menu, and the sidebar menu should be updating and highlighting as you move from page to page. They will also mirror changes done in the SilverStripe CMS, such as renaming pages or moving them around.
|
Both the top menu, and the sidebar menu should be updating and highlighting as you move from page to page. They will also mirror changes done in the SilverStripe CMS, such as renaming pages or moving them around.
|
||||||
|
|
||||||
![](_images/tutorial1_menu-two-level.jpg)
|
![](/_images/tutorial1_menu-two-level.jpg)
|
||||||
|
|
||||||
Feel free to experiment with the if and loop statements. For example, you could create a drop down style menu from the top navigation using a combination of if statements, loops, and some CSS to style it.
|
Feel free to experiment with the if and loop statements. For example, you could create a drop down style menu from the top navigation using a combination of if statements, loops, and some CSS to style it.
|
||||||
|
|
||||||
@ -331,7 +332,7 @@ Earlier we stated that every page in a SilverStripe site has a **page type**, an
|
|||||||
template, or template layout, corresponding to the page type. Therefore, the first step when switching the homepage template is to create a new page type.
|
template, or template layout, corresponding to the page type. Therefore, the first step when switching the homepage template is to create a new page type.
|
||||||
|
|
||||||
Each page type is represented by two PHP classes: a *data object* and a *controller*. Don't worry about the details of page
|
Each page type is represented by two PHP classes: a *data object* and a *controller*. Don't worry about the details of page
|
||||||
types right now, we will go into much more detail in the [next tutorial](2-extending-a-basic-site).
|
types right now, we will go into much more detail in the [next tutorial](/tutorials/extending_a_basic_site).
|
||||||
|
|
||||||
Create a new file *HomePage.php* in *mysite/code*. Copy the following code into it:
|
Create a new file *HomePage.php* in *mysite/code*. Copy the following code into it:
|
||||||
|
|
||||||
@ -357,7 +358,7 @@ After building the database, we can change the page type of the homepage in the
|
|||||||
|
|
||||||
In the CMS, navigate to the "Home" page and switch to the "Settings" tab. Change "Page type" to *Home Page*, and click "Save & Publish".
|
In the CMS, navigate to the "Home" page and switch to the "Settings" tab. Change "Page type" to *Home Page*, and click "Save & Publish".
|
||||||
|
|
||||||
![](_images/tutorial1_homepage-type.jpg)
|
![](/_images/tutorial1_homepage-type.jpg)
|
||||||
|
|
||||||
Our homepage is now of the page type *HomePage*. Regardless, it is still
|
Our homepage is now of the page type *HomePage*. Regardless, it is still
|
||||||
rendered with the *Page* template. SilverStripe does this as our homepage inherits its type from *Page*,
|
rendered with the *Page* template. SilverStripe does this as our homepage inherits its type from *Page*,
|
||||||
@ -389,27 +390,20 @@ We'll also replace the title text with an image. Find this line:
|
|||||||
Your Home page should now look like this:
|
Your Home page should now look like this:
|
||||||
|
|
||||||
|
|
||||||
![](_images/tutorial1_home-template.jpg)
|
![](/_images/tutorial1_home-template.jpg)
|
||||||
|
|
||||||
SilverStripe first searches for a template in the *themes/simple/templates* folder. Since there is no *HomePage.ss*,
|
SilverStripe first searches for a template in the *themes/simple/templates* folder. Since there is no *HomePage.ss*,
|
||||||
it will use the *Page.ss* for both *Page* and *HomePage* page types. When it comes across the *$Layout* tag, it will
|
it will use the *Page.ss* for both *Page* and *HomePage* page types. When it comes across the *$Layout* tag, it will
|
||||||
then descend into the *themes/simple/templates/Layout* folder, and will use *Page.ss* for the *Page* page type, and
|
then descend into the *themes/simple/templates/Layout* folder, and will use *Page.ss* for the *Page* page type, and
|
||||||
*HomePage.ss* for the *HomePage* page type. So while you could create a HomePage.ss in the *themes/simple/templates/* it is better to reuse the navigation and footer common to both our Home page and the rest of the pages on our website.
|
*HomePage.ss* for the *HomePage* page type. So while you could create a HomePage.ss in the *themes/simple/templates/* it is better to reuse the navigation and footer common to both our Home page and the rest of the pages on our website.
|
||||||
|
|
||||||
![](_images/tutorial1_subtemplates-diagram.jpg)
|
![](/_images/tutorial1_subtemplates-diagram.jpg)
|
||||||
|
|
||||||
|
|
||||||
## Summary
|
## Summary
|
||||||
|
|
||||||
So far we have taken a look at the different areas and functionality within the pages area of the CMS. We have learnt about template variables, controls and if statements and used these to build a basic, but fully functional, website. We have also briefly covered page types, and looked at how they correspond to templates and sub-templates. Using this knowledge, we have customized our website's homepage design.
|
So far we have taken a look at the different areas and functionality within the pages area of the CMS. We have learnt about template variables, controls and if statements and used these to build a basic, but fully functional, website. We have also briefly covered page types, and looked at how they correspond to templates and sub-templates. Using this knowledge, we have customized our website's homepage design.
|
||||||
|
|
||||||
In the next tutorial, [Extending a Basic Site](2-extending-a-basic-site), we will explore page types on a deeper level, and look at customising our own page types to extend the functionality of SilverStripe.
|
In the next tutorial, [Extending a Basic Site](/tutorials/extending_a_basic_site), we will explore page types on a deeper level, and look at customising our own page types to extend the functionality of SilverStripe.
|
||||||
|
|
||||||
[Next tutorial >>](2-extending-a-basic-site)
|
[Next tutorial >>](/tutorials/extending_a_basic_site)
|
||||||
|
|
||||||
## Books on SilverStripe
|
|
||||||
|
|
||||||
* [Official book on SilverStripe in English](http://www.silverstripe.org/silverstripe-book).
|
|
||||||
* [Official book on SilverStripe in German](http://www.silverstripe.org/das-silverstripe-buch).
|
|
||||||
|
|
||||||
![](_images/silverstripe-cms-book-front-cover-design-june2009preview.jpg)
|
|
||||||
|
@ -1,3 +1,4 @@
|
|||||||
|
title: Extending a basic site
|
||||||
summary: Building on tutorial 1, a look at storing data in SilverStripe and creating a latest news feed.
|
summary: Building on tutorial 1, a look at storing data in SilverStripe and creating a latest news feed.
|
||||||
|
|
||||||
# Tutorial 2 - Extending a basic site
|
# Tutorial 2 - Extending a basic site
|
||||||
@ -5,7 +6,7 @@ summary: Building on tutorial 1, a look at storing data in SilverStripe and crea
|
|||||||
## Overview
|
## Overview
|
||||||
|
|
||||||
|
|
||||||
In the [first tutorial (Building a basic site)](1-building-a-basic-site) we learnt how to create a basic site using SilverStripe. This tutorial will build on that, and explore extending SilverStripe by creating our own page types. After doing this we should have a better understanding of how SilverStripe works.
|
In the [first tutorial (Building a basic site)](/tutorials/building_a_basic_site) we learnt how to create a basic site using SilverStripe. This tutorial will build on that, and explore extending SilverStripe by creating our own page types. After doing this we should have a better understanding of how SilverStripe works.
|
||||||
|
|
||||||
## What are we working towards?
|
## What are we working towards?
|
||||||
|
|
||||||
@ -13,12 +14,12 @@ We are going to work on adding two new sections to the site we built in the firs
|
|||||||
|
|
||||||
The first of these new sections will be *News*, with a recent news listing on the homepage and an RSS feed:
|
The first of these new sections will be *News*, with a recent news listing on the homepage and an RSS feed:
|
||||||
|
|
||||||
![](_images/tutorial2_newslist.jpg)
|
![](/_images/tutorial2_newslist.jpg)
|
||||||
|
|
||||||
|
|
||||||
The second will be a *Staff* section, to demonstrate more complex database structures (such as associating an image with each staff member):
|
The second will be a *Staff* section, to demonstrate more complex database structures (such as associating an image with each staff member):
|
||||||
|
|
||||||
![](_images/tutorial2_einstein.jpg)
|
![](/_images/tutorial2_einstein.jpg)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -52,7 +53,7 @@ Creating a new page type requires creating each of these three elements. We will
|
|||||||
A more in-depth introduction of Model-View-Controller can be found
|
A more in-depth introduction of Model-View-Controller can be found
|
||||||
[here](http://www.slash7.com/articles/2005/02/22/mvc-the-most-vexing-conundrum).
|
[here](http://www.slash7.com/articles/2005/02/22/mvc-the-most-vexing-conundrum).
|
||||||
|
|
||||||
![](_images/tutorial2_pagetype-inheritance.jpg)
|
![](/_images/tutorial2_pagetype-inheritance.jpg)
|
||||||
|
|
||||||
## Creating the news section page types
|
## Creating the news section page types
|
||||||
|
|
||||||
@ -118,7 +119,7 @@ it. Add a *$db* property definition in the *ArticlePage* class:
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
Every entry in the array is a *key => value* pair. The **key** is the name of the field, and the **value** is the type. See ["data types"](/topics/data-types) for a complete list of types.
|
Every entry in the array is a *key => value* pair. The **key** is the name of the field, and the **value** is the type. See ["data types and casting"](/developer_guides/model/data_types_and_casting) for a complete list of types.
|
||||||
|
|
||||||
<div class="hint" markdown="1">
|
<div class="hint" markdown="1">
|
||||||
The names chosen for the fields you add must not already be used. Be careful using field names such as Title,
|
The names chosen for the fields you add must not already be used. Be careful using field names such as Title,
|
||||||
@ -173,7 +174,7 @@ would create a new tab called "New Tab", and a single "Author" textfield inside.
|
|||||||
</div>
|
</div>
|
||||||
|
|
||||||
We have added two fields: A simple `[api:TextField]` and a `[api:DateField]`.
|
We have added two fields: A simple `[api:TextField]` and a `[api:DateField]`.
|
||||||
There are many more fields available in the default installation, listed in ["form field types"](/reference/form-field-types).
|
There are many more fields available in the default installation, listed in ["form field types"](/developer_guides/forms/fields/common_subclasses).
|
||||||
|
|
||||||
:::php
|
:::php
|
||||||
return $fields;
|
return $fields;
|
||||||
@ -183,7 +184,7 @@ Finally, we return the fields to the CMS. If we flush the cache (by adding ?flus
|
|||||||
|
|
||||||
Now that we have created our page types, let's add some content. Go into the CMS and create an *ArticleHolder* page named "News", then create a few *ArticlePage*'s within it.
|
Now that we have created our page types, let's add some content. Go into the CMS and create an *ArticleHolder* page named "News", then create a few *ArticlePage*'s within it.
|
||||||
|
|
||||||
![](_images/tutorial2_news-cms.jpg)
|
![](/_images/tutorial2_news-cms.jpg)
|
||||||
|
|
||||||
## Modifing the date field
|
## Modifing the date field
|
||||||
|
|
||||||
@ -268,13 +269,13 @@ To access the new fields, we use *$Date* and *$Author*. In fact, all template va
|
|||||||
spread across several tables in the database matched by id - e.g. *Content* is in the *SiteTree* table, and *Date* and
|
spread across several tables in the database matched by id - e.g. *Content* is in the *SiteTree* table, and *Date* and
|
||||||
*Author* are in the *ArticlePage* table. SilverStripe matches this data, and collates it into a single data object.
|
*Author* are in the *ArticlePage* table. SilverStripe matches this data, and collates it into a single data object.
|
||||||
|
|
||||||
![](_images/tutorial2_data-collation.jpg)
|
![](/_images/tutorial2_data-collation.jpg)
|
||||||
|
|
||||||
Rather than using *$Date* directly, we use *$Date.Nice*. If we look in the `[api:Date]` documentation, we can see
|
Rather than using *$Date* directly, we use *$Date.Nice*. If we look in the `[api:Date]` documentation, we can see
|
||||||
that the *Nice* function returns the date in *dd/mm/yyyy* format, rather than the *yyyy-mm-dd* format stored in the
|
that the *Nice* function returns the date in *dd/mm/yyyy* format, rather than the *yyyy-mm-dd* format stored in the
|
||||||
database.
|
database.
|
||||||
|
|
||||||
![](_images/tutorial2_news.jpg)
|
![](/_images/tutorial2_news.jpg)
|
||||||
|
|
||||||
###ArticleHolder Template
|
###ArticleHolder Template
|
||||||
We'll now create a template for the article holder. We want our news section to show a list of news items, each with a summary and a link to the main article (our Article Page).
|
We'll now create a template for the article holder. We want our news section to show a list of news items, each with a summary and a link to the main article (our Article Page).
|
||||||
@ -302,12 +303,12 @@ We'll now create a template for the article holder. We want our news section to
|
|||||||
|
|
||||||
Here we use the page control *Children*. As the name suggests, this control allows you to iterate over the children of a page. In this case, the children are our news articles. The *$Link* variable will give the address of the article which we can use to create a link, and the *FirstParagraph* function of the `[api:HTMLText]` field gives us a nice summary of the article. The function strips all tags from the paragraph extracted.
|
Here we use the page control *Children*. As the name suggests, this control allows you to iterate over the children of a page. In this case, the children are our news articles. The *$Link* variable will give the address of the article which we can use to create a link, and the *FirstParagraph* function of the `[api:HTMLText]` field gives us a nice summary of the article. The function strips all tags from the paragraph extracted.
|
||||||
|
|
||||||
![](_images/tutorial2_articleholder.jpg)
|
![](/_images/tutorial2_articleholder.jpg)
|
||||||
|
|
||||||
|
|
||||||
### Using include files in templates
|
### Using include files in templates
|
||||||
|
|
||||||
We can make our templates more modular and easier to maintain by separating commonly-used components in to *include files*. We are already familiar with the `<% include Sidebar %>` line from looking at the menu in the [first tutorial (Building a basic site)](1-building-a-basic-site).
|
We can make our templates more modular and easier to maintain by separating commonly-used components in to *include files*. We are already familiar with the `<% include Sidebar %>` line from looking at the menu in the [first tutorial (Building a basic site)](/tutorials/building_a_basic_site).
|
||||||
|
|
||||||
We'll separate the display of linked articles as we want to reuse this code later on.
|
We'll separate the display of linked articles as we want to reuse this code later on.
|
||||||
|
|
||||||
@ -350,7 +351,7 @@ And this one to the *HomePage* class:
|
|||||||
|
|
||||||
This will change the icons for the pages in the CMS.
|
This will change the icons for the pages in the CMS.
|
||||||
|
|
||||||
![](_images/tutorial2_icons2.jpg)
|
![](/_images/tutorial2_icons2.jpg)
|
||||||
|
|
||||||
<div class="hint" markdown="1">
|
<div class="hint" markdown="1">
|
||||||
Note: The `news-file` icon may not exist in a default SilverStripe installation. Try adding your own image or choosing a different one from the `treeicons` collection.
|
Note: The `news-file` icon may not exist in a default SilverStripe installation. Try adding your own image or choosing a different one from the `treeicons` collection.
|
||||||
@ -370,7 +371,7 @@ It would be nice to greet page visitors with a summary of the latest news when t
|
|||||||
}
|
}
|
||||||
|
|
||||||
|
|
||||||
This function simply runs a database query that gets the latest news articles from the database. By default, this is five, but you can change it by passing a number to the function. See the [Data Model](../topics/datamodel) documentation for details. We can reference this function as a page control in our *HomePage* template:
|
This function simply runs a database query that gets the latest news articles from the database. By default, this is five, but you can change it by passing a number to the function. See the [Data Model and ORM](/developer_guides/model/data_model_and_orm) documentation for details. We can reference this function as a page control in our *HomePage* template:
|
||||||
|
|
||||||
**themes/simple/templates/Layout/Homepage.ss**
|
**themes/simple/templates/Layout/Homepage.ss**
|
||||||
|
|
||||||
@ -387,7 +388,7 @@ When SilverStripe comes across a variable or page control it doesn't recognize,
|
|||||||
|
|
||||||
The controller for a page is only created when page is actually visited, while the data object is available when the page is referenced in other pages, e.g. by page controls. A good rule of thumb is to put all functions specific to the page currently being viewed in the controller; only if a function needs to be used in another page should you put it in the data object.
|
The controller for a page is only created when page is actually visited, while the data object is available when the page is referenced in other pages, e.g. by page controls. A good rule of thumb is to put all functions specific to the page currently being viewed in the controller; only if a function needs to be used in another page should you put it in the data object.
|
||||||
|
|
||||||
![](_images/tutorial2_homepage-news.jpg)
|
![](/_images/tutorial2_homepage-news.jpg)
|
||||||
|
|
||||||
|
|
||||||
|
|
||||||
@ -412,7 +413,7 @@ This function creates an RSS feed of all the news articles, and outputs it to th
|
|||||||
|
|
||||||
Depending on your browser, you should see something like the picture below. If your browser doesn't support RSS, you will most likely see the XML output instead. For more on RSS, see `[api:RSSFeed]`
|
Depending on your browser, you should see something like the picture below. If your browser doesn't support RSS, you will most likely see the XML output instead. For more on RSS, see `[api:RSSFeed]`
|
||||||
|
|
||||||
![](_images/tutorial2_rss-feed.jpg)
|
![](/_images/tutorial2_rss-feed.jpg)
|
||||||
|
|
||||||
Now all we need is to let the user know that our RSS feed exists. Add this function to *ArticleHolder_Controller*:
|
Now all we need is to let the user know that our RSS feed exists. Add this function to *ArticleHolder_Controller*:
|
||||||
|
|
||||||
@ -479,12 +480,12 @@ We then add an `[api:UploadField]` in the *getCMSFields* function to the tab "Ro
|
|||||||
the *addFieldToTab* function will create it for us. The *UploadField* allows us to select an image or upload a new one in
|
the *addFieldToTab* function will create it for us. The *UploadField* allows us to select an image or upload a new one in
|
||||||
the CMS.
|
the CMS.
|
||||||
|
|
||||||
![](_images/tutorial2_photo.jpg)
|
![](/_images/tutorial2_photo.jpg)
|
||||||
|
|
||||||
Rebuild the database ([http://localhost/your_site_name/dev/build](http://localhost/your_site_name/dev/build)) and open the CMS. Create
|
Rebuild the database ([http://localhost/your_site_name/dev/build](http://localhost/your_site_name/dev/build)) and open the CMS. Create
|
||||||
a new *StaffHolder* called "Staff", and create some *StaffPage*s in it.
|
a new *StaffHolder* called "Staff", and create some *StaffPage*s in it.
|
||||||
|
|
||||||
![](_images/tutorial2_create-staff.jpg)
|
![](/_images/tutorial2_create-staff.jpg)
|
||||||
|
|
||||||
|
|
||||||
### Creating the staff section templates
|
### Creating the staff section templates
|
||||||
@ -517,7 +518,7 @@ This template is very similar to the *ArticleHolder* template. The *SetWidth* me
|
|||||||
will resize the image before sending it to the browser. The resized image is cached, so the server doesn't have to
|
will resize the image before sending it to the browser. The resized image is cached, so the server doesn't have to
|
||||||
resize the image every time the page is viewed.
|
resize the image every time the page is viewed.
|
||||||
|
|
||||||
![](_images/tutorial2_staff-section.jpg)
|
![](/_images/tutorial2_staff-section.jpg)
|
||||||
|
|
||||||
The *StaffPage* template is also very straight forward.
|
The *StaffPage* template is also very straight forward.
|
||||||
|
|
||||||
@ -538,10 +539,10 @@ The *StaffPage* template is also very straight forward.
|
|||||||
Here we use the *SetWidth* method to get a different sized image from the same source image. You should now have
|
Here we use the *SetWidth* method to get a different sized image from the same source image. You should now have
|
||||||
a complete staff section.
|
a complete staff section.
|
||||||
|
|
||||||
![](_images/tutorial2_einstein.jpg)
|
![](/_images/tutorial2_einstein.jpg)
|
||||||
|
|
||||||
## Summary
|
## Summary
|
||||||
|
|
||||||
In this tutorial we have explored the concept of page types. In the process of creating and extending page types we have covered many of the concepts required to build a site with SilverStripe.
|
In this tutorial we have explored the concept of page types. In the process of creating and extending page types we have covered many of the concepts required to build a site with SilverStripe.
|
||||||
|
|
||||||
[Next Tutorial >>](3-forms)
|
[Next Tutorial >>](/tutorials/forms)
|
||||||
|
@ -1,18 +1,19 @@
|
|||||||
|
title: Forms
|
||||||
summary: Capture and store user information through web forms.
|
summary: Capture and store user information through web forms.
|
||||||
|
|
||||||
# Tutorial 3 - Forms
|
# Tutorial 3 - Forms
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
|
|
||||||
This tutorial is intended to be a continuation of the first two tutorials ([first tutorial](1-building-a-basic-site), [second tutorial](2-extending-a-basic-site)). In this tutorial we will build on the site we developed in the earlier tutorials and explore forms in SilverStripe. We will look at custom coded forms: forms which need to be written in PHP.
|
This tutorial is intended to be a continuation of the first two tutorials ([first tutorial](/tutorials/building_a_basic_site), [second tutorial](/tutorials/extending_a_basic_site)). In this tutorial we will build on the site we developed in the earlier tutorials and explore forms in SilverStripe. We will look at custom coded forms: forms which need to be written in PHP.
|
||||||
|
|
||||||
Instead of using a custom coded form, we could use the [userforms module](http://silverstripe.org/user-forms-module). This module allows users to construct forms via the CMS. A form created this way is much quicker to implement, but also lacks the flexibility of a coded form.
|
Instead of using a custom coded form, we could use the [userforms module](http://addons.silverstripe.org/add-ons/silverstripe/userforms). This module allows users to construct forms via the CMS. A form created this way is much quicker to implement, but also lacks the flexibility of a coded form.
|
||||||
|
|
||||||
## What are we working towards?
|
## What are we working towards?
|
||||||
|
|
||||||
We will create a poll on the home page that asks the user their favourite web browser, and displays a bar graph of the results.
|
We will create a poll on the home page that asks the user their favourite web browser, and displays a bar graph of the results.
|
||||||
|
|
||||||
![tutorial:tutorial3_pollresults.png](_images/tutorial3_pollresults.jpg)
|
![tutorial:tutorial3_pollresults.png](/_images/tutorial3_pollresults.jpg)
|
||||||
|
|
||||||
|
|
||||||
## Creating the form
|
## Creating the form
|
||||||
@ -162,7 +163,7 @@ Add the following code to the existing `form.css` file:
|
|||||||
|
|
||||||
All going according to plan, if you visit [http://localhost/your_site_name/home/?flush=1](http://localhost/your_site_name/home/?flush=1) it should look something like this:
|
All going according to plan, if you visit [http://localhost/your_site_name/home/?flush=1](http://localhost/your_site_name/home/?flush=1) it should look something like this:
|
||||||
|
|
||||||
![](_images/tutorial3_pollform.jpg)
|
![](/_images/tutorial3_pollform.jpg)
|
||||||
|
|
||||||
|
|
||||||
## Processing the form
|
## Processing the form
|
||||||
@ -170,7 +171,7 @@ All going according to plan, if you visit [http://localhost/your_site_name/home/
|
|||||||
Great! We now have a browser poll form, but it doesn't actually do anything. In order to make the form work, we have to implement the 'doBrowserPoll()' method that we told it about.
|
Great! We now have a browser poll form, but it doesn't actually do anything. In order to make the form work, we have to implement the 'doBrowserPoll()' method that we told it about.
|
||||||
|
|
||||||
First, we need some way of saving the poll submissions to the database, so we can retrieve the results later. We can do this by creating a new object that extends from `[api:DataObject]`.
|
First, we need some way of saving the poll submissions to the database, so we can retrieve the results later. We can do this by creating a new object that extends from `[api:DataObject]`.
|
||||||
If you recall, in the [second tutorial](2-extending-a-basic-site) we said that all objects that inherit from DataObject and have their own fields are stored in tables the database. Also recall that all pages extend DataObject indirectly through `[api:SiteTree]`. Here instead of extending SiteTree (or `[api:Page]`) to create a page type, we will extend `[api:DataObject]` directly:
|
If you recall, in the [second tutorial](/tutorials/extending_a_basic_site) we said that all objects that inherit from DataObject and have their own fields are stored in tables the database. Also recall that all pages extend DataObject indirectly through `[api:SiteTree]`. Here instead of extending SiteTree (or `[api:Page]`) to create a page type, we will extend `[api:DataObject]` directly:
|
||||||
|
|
||||||
**mysite/code/BrowserPollSubmission.php**
|
**mysite/code/BrowserPollSubmission.php**
|
||||||
|
|
||||||
@ -223,7 +224,7 @@ Change the end of the 'BrowserPollForm' function so it looks like this:
|
|||||||
|
|
||||||
If we then open the homepage and attempt to submit the form without filling in the required fields errors should appear.
|
If we then open the homepage and attempt to submit the form without filling in the required fields errors should appear.
|
||||||
|
|
||||||
![](_images/tutorial3_validation.jpg)
|
![](/_images/tutorial3_validation.jpg)
|
||||||
|
|
||||||
|
|
||||||
## Showing the poll results
|
## Showing the poll results
|
||||||
@ -270,7 +271,7 @@ Although the form is not shown, you'll still see the 'Browser Poll' heading. We'
|
|||||||
|
|
||||||
Now that we're collecting data, it would be nice to show the results on the website as well. We could simply output every vote, but that's boring. Let's group the results by browser, through the SilverStripe data model.
|
Now that we're collecting data, it would be nice to show the results on the website as well. We could simply output every vote, but that's boring. Let's group the results by browser, through the SilverStripe data model.
|
||||||
|
|
||||||
In the [second tutorial](/tutorials/2-extending-a-basic-site), we got a collection of news articles for the home page by using the 'ArticleHolder::get()' function, which returns a `[api:DataList]`. We can get all submissions in the same fashion, through `BrowserPollSubmission::get()`. This list will be the starting point for our result aggregation.
|
In the [second tutorial](/tutorials/extending_a_basic_site), we got a collection of news articles for the home page by using the 'ArticleHolder::get()' function, which returns a `[api:DataList]`. We can get all submissions in the same fashion, through `BrowserPollSubmission::get()`. This list will be the starting point for our result aggregation.
|
||||||
|
|
||||||
Create the function 'BrowserPollResults' on the *HomePage_Controller* class.
|
Create the function 'BrowserPollResults' on the *HomePage_Controller* class.
|
||||||
|
|
||||||
@ -347,10 +348,10 @@ and the poll results need to be displayed.
|
|||||||
|
|
||||||
We use the normal tactic of putting the data into an unordered list and using CSS to style it, except here we use inline styles to display a bar that is sized proportionate to the number of votes the browser has received. You should now have a complete poll.
|
We use the normal tactic of putting the data into an unordered list and using CSS to style it, except here we use inline styles to display a bar that is sized proportionate to the number of votes the browser has received. You should now have a complete poll.
|
||||||
|
|
||||||
![](_images/tutorial3_pollresults.jpg)
|
![](/_images/tutorial3_pollresults.jpg)
|
||||||
|
|
||||||
## Summary
|
## Summary
|
||||||
|
|
||||||
In this tutorial we have explored custom php forms, and displayed result sets through Grouped Lists. We have briefly covered the different approaches to creating and using forms. Whether you decide to use the [userforms module](http://silverstripe.org/user-forms-module) or create a form in PHP depends on the situation and flexibility required.
|
In this tutorial we have explored custom php forms, and displayed result sets through Grouped Lists. We have briefly covered the different approaches to creating and using forms. Whether you decide to use the [userforms module](http://addons.silverstripe.org/add-ons/silverstripe/userforms) or create a form in PHP depends on the situation and flexibility required.
|
||||||
|
|
||||||
[Next Tutorial >>](4-site-search)
|
[Next Tutorial >>](/tutorials/site_search)
|
||||||
|
@ -1,16 +1,17 @@
|
|||||||
|
title: Site Search
|
||||||
summary: Enable website search. How to handle paged result sets and the SearchForm class.
|
summary: Enable website search. How to handle paged result sets and the SearchForm class.
|
||||||
|
|
||||||
# Tutorial 4 - Site Search
|
# Tutorial 4 - Site Search
|
||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
|
|
||||||
This is a short tutorial demonstrating how to add search functionality to a SilverStripe site. It is recommended that you have completed the earlier tutorials ([Building a basic site](1-building-a-basic-site), [Extending a basic site](2-extending-a-basic-site), [Forms](3-forms)), especially the tutorial on forms, before attempting this tutorial. While this tutorial will add search functionality to the site built in the previous tutorials, it should be straight forward to follow this tutorial on any site of your own.
|
This is a short tutorial demonstrating how to add search functionality to a SilverStripe site. It is recommended that you have completed the earlier tutorials ([Building a basic site](/tutorials/building_a_basic_site), [Extending a basic site](/tutorials/extending_a_basic_site), [Forms](/tutorials/forms)), especially the tutorial on forms, before attempting this tutorial. While this tutorial will add search functionality to the site built in the previous tutorials, it should be straight forward to follow this tutorial on any site of your own.
|
||||||
|
|
||||||
## What are we working towards?
|
## What are we working towards?
|
||||||
|
|
||||||
We are going to add a search box on the top of the page. When a user types something in the box, they are taken to a results page.
|
We are going to add a search box on the top of the page. When a user types something in the box, they are taken to a results page.
|
||||||
|
|
||||||
![](_images/tutorial4_search.jpg)
|
![](/_images/tutorial4_search.jpg)
|
||||||
|
|
||||||
## Creating the search form
|
## Creating the search form
|
||||||
|
|
||||||
@ -45,7 +46,7 @@ To add the search form, we can add `$SearchForm` anywhere in our templates. In t
|
|||||||
|
|
||||||
This displays as:
|
This displays as:
|
||||||
|
|
||||||
![](_images/tutorial4_searchbox.jpg)
|
![](/_images/tutorial4_searchbox.jpg)
|
||||||
|
|
||||||
## Showing the results
|
## Showing the results
|
||||||
|
|
||||||
@ -151,10 +152,10 @@ class.
|
|||||||
Then finally add ?flush=1 to the URL and you should see the new template.
|
Then finally add ?flush=1 to the URL and you should see the new template.
|
||||||
|
|
||||||
|
|
||||||
![](_images/tutorial4_search.jpg)
|
![](/_images/tutorial4_search.jpg)
|
||||||
|
|
||||||
## Summary
|
## Summary
|
||||||
|
|
||||||
This tutorial has demonstrated how easy it is to have full text searching on your site. To add search to a SilverStripe site add a search form, a results page, and you're done!
|
This tutorial has demonstrated how easy it is to have full text searching on your site. To add search to a SilverStripe site add a search form, a results page, and you're done!
|
||||||
|
|
||||||
[Next Tutorial >>](5-dataobject-relationship-management)
|
[Next Tutorial >>](/tutorials/dataobject_relationship_management)
|
||||||
|
@ -5,7 +5,7 @@ summary: Learn how to create custom DataObjects and how to build interfaces for
|
|||||||
|
|
||||||
## Overview
|
## Overview
|
||||||
|
|
||||||
This tutorial explores the relationship and management of [DataObjects](/topics/datamodel#relations). It builds on the [second tutorial](2-extending-a-basic-site) where we learnt how to define
|
This tutorial explores the relationship and management of [DataObjects](/developer_guides/model/dataobject). It builds on the [second tutorial](/tutorials/extending_a_basic_site) where we learnt how to define
|
||||||
additional fields on our models, and attach images to them.
|
additional fields on our models, and attach images to them.
|
||||||
|
|
||||||
## What are we working towards?
|
## What are we working towards?
|
||||||
@ -61,8 +61,8 @@ Let's create the `Student` and `Project` objects.
|
|||||||
The relationships are defined through the `$has_one`
|
The relationships are defined through the `$has_one`
|
||||||
and `$has_many` properties on the objects.
|
and `$has_many` properties on the objects.
|
||||||
The array keys declares the name of the relationship,
|
The array keys declares the name of the relationship,
|
||||||
the array values contain the class name (see the ["database structure"](/reference/database-structure)
|
the array values contain the class name (see the ["database structure"](/developer_guides/model/database_structure)
|
||||||
and ["datamodel"](/topics/datamodel) topics for more information).
|
and ["datamodel"](/developer_guides/model/data_model_and_orm) topics for more information).
|
||||||
|
|
||||||
As you can see, only the `Project` model extends `Page`,
|
As you can see, only the `Project` model extends `Page`,
|
||||||
while `Student` is a plain `DataObject` subclass.
|
while `Student` is a plain `DataObject` subclass.
|
||||||
@ -106,7 +106,7 @@ as part of the normal page hierarchy in the CMS.
|
|||||||
|
|
||||||
Now that we have created our `ProjectsHolder` and `Project` page types, we'll add some content.
|
Now that we have created our `ProjectsHolder` and `Project` page types, we'll add some content.
|
||||||
Go into the CMS and create a `ProjectsHolder` page named **Projects**.
|
Go into the CMS and create a `ProjectsHolder` page named **Projects**.
|
||||||
Then create one `Project` page for each project listed [above](#what-are-we-working-towards).
|
Then create one `Project` page for each project listed [above](/tutorials/dataobject_relationship_management#what-are-we-working-towards).
|
||||||
|
|
||||||
### Data Management Interface: GridField
|
### Data Management Interface: GridField
|
||||||
|
|
||||||
@ -170,17 +170,17 @@ We call `setDisplayFields()` directly on the component responsible for their ren
|
|||||||
using the `[ModelAdmin](reference/modeladmin)` interface instead.
|
using the `[ModelAdmin](reference/modeladmin)` interface instead.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
![tutorial:tutorial5_project_creation.jpg](_images/tutorial5_project_creation.jpg)
|
![tutorial:tutorial5_project_creation.jpg](/_images/tutorial5_project_creation.jpg)
|
||||||
|
|
||||||
Select each `Project` page you have created before,
|
Select each `Project` page you have created before,
|
||||||
go in the tab panel called "Students", and add all students as required,
|
go in the tab panel called "Students", and add all students as required,
|
||||||
by clicking on the link **Add Student** of your *GridField* table.
|
by clicking on the link **Add Student** of your *GridField* table.
|
||||||
|
|
||||||
![tutorial:tutorial5_addNew.jpg](_images/tutorial5_addNew.jpg)
|
![tutorial:tutorial5_addNew.jpg](/_images/tutorial5_addNew.jpg)
|
||||||
|
|
||||||
Once you have added all the students, and selected their projects, it should look a little like this:
|
Once you have added all the students, and selected their projects, it should look a little like this:
|
||||||
|
|
||||||
![tutorial:tutorial5_students.jpg](_images/tutorial5_students.jpg)
|
![tutorial:tutorial5_students.jpg](/_images/tutorial5_students.jpg)
|
||||||
|
|
||||||
### Many-many relationships: Mentor
|
### Many-many relationships: Mentor
|
||||||
|
|
||||||
@ -250,18 +250,18 @@ In the CMS, open one of your `Project` pages and select the "Mentors" tab.
|
|||||||
Add all the mentors listed [above](#what-are-we-working-towards)
|
Add all the mentors listed [above](#what-are-we-working-towards)
|
||||||
by clicking on the **Add Mentor** button.
|
by clicking on the **Add Mentor** button.
|
||||||
|
|
||||||
![tutorial:tutorial5_module_creation.jpg](_images/tutorial5_module_creation.jpg)
|
![tutorial:tutorial5_module_creation.jpg](/_images/tutorial5_module_creation.jpg)
|
||||||
|
|
||||||
To associate the mentor with a project, select one of the mentors, and click on the projects tab. Add all the projects a mentor is associated with (see the [list](#What_are_we_working_towards?)), by typing the name in "Find Projects by Page name" and clicking the "Link Existing" button.
|
To associate the mentor with a project, select one of the mentors, and click on the projects tab. Add all the projects a mentor is associated with (see the [list](/tutorials/dataobject_relationship_management#What_are_we_working_towards?)), by typing the name in "Find Projects by Page name" and clicking the "Link Existing" button.
|
||||||
You will notice that you are able to select the same `Project` for multiple mentors.
|
You will notice that you are able to select the same `Project` for multiple mentors.
|
||||||
This is the definition of a **many-to-many** relation.
|
This is the definition of a **many-to-many** relation.
|
||||||
|
|
||||||
![tutorial:tutorial5_module_selection.jpg](_images/tutorial5_module_selection.jpg)
|
![tutorial:tutorial5_module_selection.jpg](/_images/tutorial5_module_selection.jpg)
|
||||||
|
|
||||||
|
|
||||||
## Website Display
|
## Website Display
|
||||||
|
|
||||||
Now that we have created all the *Page* and *DataObject* classes necessary and the relational tables to manage the [relations](/topics/datamodel#relations) between them, we would like to see these relations on the website. We will see in this section how to display all these relations,
|
Now that we have created all the *Page* and *DataObject* classes necessary and the relational tables to manage the [relations](/developer_guides/model/data_model_and_orm#relations) between them, we would like to see these relations on the website. We will see in this section how to display all these relations,
|
||||||
but also how to create a template for a *DataObject*.
|
but also how to create a template for a *DataObject*.
|
||||||
|
|
||||||
For every kind of *Page* or *DataObject*, you can access to their relations thanks to the **control** loop.
|
For every kind of *Page* or *DataObject*, you can access to their relations thanks to the **control** loop.
|
||||||
@ -276,7 +276,7 @@ accessing a "has-many" and "many-many" relationship
|
|||||||
in the template loops: to the template, it's just
|
in the template loops: to the template, it's just
|
||||||
a named list of object.
|
a named list of object.
|
||||||
|
|
||||||
![tutorial:tutorial5_projects_table.jpg](_images/tutorial5_projects_table.jpg)
|
![tutorial:tutorial5_projects_table.jpg](/_images/tutorial5_projects_table.jpg)
|
||||||
|
|
||||||
**themes/simple/templates/Layout/ProjectsHolder.ss**
|
**themes/simple/templates/Layout/ProjectsHolder.ss**
|
||||||
|
|
||||||
@ -334,7 +334,7 @@ Creating the detail view for each `Project` page works in a very similar way.
|
|||||||
Given that we're in the context of a single project,
|
Given that we're in the context of a single project,
|
||||||
we can access the "Students" and "Mentors" relationships directly in the template.
|
we can access the "Students" and "Mentors" relationships directly in the template.
|
||||||
|
|
||||||
![tutorial:tutorial5_project.jpg](_images/tutorial5_project.jpg)
|
![tutorial:tutorial5_project.jpg](/_images/tutorial5_project.jpg)
|
||||||
|
|
||||||
**themes/simple/templates/Layout/Project.ss**
|
**themes/simple/templates/Layout/Project.ss**
|
||||||
|
|
@ -3,24 +3,14 @@ introduction: The tutorials below take a step by step look at how to build a Sil
|
|||||||
|
|
||||||
## Written Tutorials
|
## Written Tutorials
|
||||||
|
|
||||||
* [Tutorial 1: Building a basic site](1-building-a-basic-site): An introduction to building a site with
|
[CHILDREN]
|
||||||
SilverStripe.
|
|
||||||
* [Tutorial 2: Extending a basic site](2-extending-a-basic-site): A tutorial that builds on "Building a basic
|
|
||||||
site".
|
|
||||||
* [Tutorial 3: Forms](3-forms): An introduction to forms in SilverStripe.
|
|
||||||
* [Tutorial 4: Site Search](4-site-search): Learn how to add search to your site.
|
|
||||||
* [Tutorial 5: Dataobject Relationship Management](5-dataobject-relationship-management): Learn how to create
|
|
||||||
simple data relationships.
|
|
||||||
|
|
||||||
## Video tutorials
|
## Video tutorials
|
||||||
|
|
||||||
* [Installing on Linux](http://silverstripe.org/assets/screencasts/Tutorial-InstallingLinux-DM08.swf)
|
* [How to set up a local development environment in SilverStripe](https://vimeo.com/108861537)
|
||||||
* [Installing on Mac OSX (using MAMP)](http://silverstripe.org/assets/screencasts/Tutorial-InstallingMAMP-SW08.swf)
|
|
||||||
* [Installing a module (e.g. a blog)](http://silverstripe.org/assets/screencasts/Tutorial-InstallingBlogModule-DM08.swf)
|
|
||||||
* [Customising the CMS (adding new fields)](http://silverstripe.org/assets/screencasts/Tutorial-ChangingFields-DM08.swf)
|
|
||||||
|
|
||||||
## Help: If you get stuck
|
## Help: If you get stuck
|
||||||
|
|
||||||
* [Common Problems](/installation/common-problems): Review some existing solutions to common problems.
|
* [Common Problems](/getting_started/installation/common_problems): Review some existing solutions to common problems.
|
||||||
* [SilverStripe Forums](http://www.silverstripe.com/silverstripe-forum/): Head over to the forums and ask the community
|
* [SilverStripe Community Forums](http://www.silverstripe.org/community/forums/): Head over to the forums and ask the community
|
||||||
for help.
|
for help.
|
||||||
|
@ -45,7 +45,7 @@ the Site Configuration panel (http://yoursite.com/admin/settings)
|
|||||||
A `theme` within SilverStripe is simply a collection of templates and other front end assets such as javascript and css.
|
A `theme` within SilverStripe is simply a collection of templates and other front end assets such as javascript and css.
|
||||||
located within the `themes` directory.
|
located within the `themes` directory.
|
||||||
|
|
||||||
![themes:basicfiles.gif](/_images/basicfiles.gif)
|
![themes:basicfiles.gif](//_images/basicfiles.gif)
|
||||||
|
|
||||||
## Submitting your theme to SilverStripe
|
## Submitting your theme to SilverStripe
|
||||||
|
|
||||||
|
@ -55,7 +55,7 @@ The reason it's standard practice to name the form function 'Form' is so that we
|
|||||||
|
|
||||||
If you now create a ContactPage in the CMS (making sure you have rebuilt the database and flushed the templates /dev/build?flush=all) and visit the page, you will now see a contact form.
|
If you now create a ContactPage in the CMS (making sure you have rebuilt the database and flushed the templates /dev/build?flush=all) and visit the page, you will now see a contact form.
|
||||||
|
|
||||||
![](../_images/howto_contactForm.jpg)
|
![](..//_images/howto_contactForm.jpg)
|
||||||
|
|
||||||
|
|
||||||
Now that we have a contact form, we need some way of collecting the data submitted. We do this by creating a function on the controller with the same name as the form action. In this case, we create the function 'submit' on the ContactPage_Controller class.
|
Now that we have a contact form, we need some way of collecting the data submitted. We do this by creating a function on the controller with the same name as the form action. In this case, we create the function 'submit' on the ContactPage_Controller class.
|
||||||
|
@ -21,19 +21,19 @@ All files, images and folders in the 'assets' directory are stored in the databa
|
|||||||
|
|
||||||
If you have the CMS module installed, you can manage files, folders and images in the "Files" section of the CMS. Inside this section, you will see a list of files and folders like below:
|
If you have the CMS module installed, you can manage files, folders and images in the "Files" section of the CMS. Inside this section, you will see a list of files and folders like below:
|
||||||
|
|
||||||
![](/_images/assets.png)
|
![](//_images/assets.png)
|
||||||
|
|
||||||
You can click on any file to edit it, or click on any folder to open it. To delete a file or a folder, simply click the red 'X' symbol next to it. If you click to open a folder, you can go back up one level by clicking the 'up' arrow above the folder name (highlighted below):
|
You can click on any file to edit it, or click on any folder to open it. To delete a file or a folder, simply click the red 'X' symbol next to it. If you click to open a folder, you can go back up one level by clicking the 'up' arrow above the folder name (highlighted below):
|
||||||
|
|
||||||
![](/_images/assets_up.png)
|
![](//_images/assets_up.png)
|
||||||
|
|
||||||
Once you click to edit a file, you will see a form similar to the one below, in which you can edit the file's title, filename, owner, or even change which folder the file is located in:
|
Once you click to edit a file, you will see a form similar to the one below, in which you can edit the file's title, filename, owner, or even change which folder the file is located in:
|
||||||
|
|
||||||
![](/_images/assets_editform.png)
|
![](//_images/assets_editform.png)
|
||||||
|
|
||||||
You may also notice the 'Sync files' button (highlighted below). This button allows CMS users to 'synchronise' the database (remember, all files/folders are stored as database records) with the filesystem. This is particularly useful if someone has uploaded or removed files/folders via FTP, for example.
|
You may also notice the 'Sync files' button (highlighted below). This button allows CMS users to 'synchronise' the database (remember, all files/folders are stored as database records) with the filesystem. This is particularly useful if someone has uploaded or removed files/folders via FTP, for example.
|
||||||
|
|
||||||
![](/_images/assets_sync.png)
|
![](//_images/assets_sync.png)
|
||||||
|
|
||||||
## Upload
|
## Upload
|
||||||
|
|
||||||
|
@ -39,7 +39,7 @@ example, the tab panels have be applied in the CMS form before the form itself i
|
|||||||
avoid incorrect dimensions.
|
avoid incorrect dimensions.
|
||||||
</div>
|
</div>
|
||||||
|
|
||||||
![Layout variations](_images/cms-architecture.png)
|
![Layout variations](/_images/cms-architecture.png)
|
||||||
|
|
||||||
## Layout API
|
## Layout API
|
||||||
|
|
||||||
|
@ -41,7 +41,7 @@ code like this:
|
|||||||
...
|
...
|
||||||
|
|
||||||
By applying the proper style sheet, the snippet html above could produce the look of:
|
By applying the proper style sheet, the snippet html above could produce the look of:
|
||||||
![Page Node Screenshot](../_images/tree_node.png "Page Node")
|
![Page Node Screenshot](..//_images/tree_node.png "Page Node")
|
||||||
|
|
||||||
SiteTree is a `[api:DataObject]` which is versioned by `[api:Versioned]` extension.
|
SiteTree is a `[api:DataObject]` which is versioned by `[api:Versioned]` extension.
|
||||||
Each node can optionally have publication status flags, e.g. "Removed from draft".
|
Each node can optionally have publication status flags, e.g. "Removed from draft".
|
||||||
@ -76,6 +76,6 @@ __Example: using a subclass__
|
|||||||
|
|
||||||
The above subclass of `[api:SiteTree]` will add a new flag for indicating its
|
The above subclass of `[api:SiteTree]` will add a new flag for indicating its
|
||||||
__'Scheduled To Publish'__ status. The look of the page node will be changed
|
__'Scheduled To Publish'__ status. The look of the page node will be changed
|
||||||
from ![Normal Page Node](../_images/page_node_normal.png) to ![Scheduled Page Node](../_images/page_node_scheduled.png). The getStatusFlags has an `updateStatusFlags()`
|
from ![Normal Page Node](..//_images/page_node_normal.png) to ![Scheduled Page Node](..//_images/page_node_scheduled.png). The getStatusFlags has an `updateStatusFlags()`
|
||||||
extension point, so the flags can be modified through `DataExtension` rather than
|
extension point, so the flags can be modified through `DataExtension` rather than
|
||||||
inheritance as well. Deleting existing flags works by simply unsetting the array key.
|
inheritance as well. Deleting existing flags works by simply unsetting the array key.
|
||||||
|
@ -48,7 +48,7 @@ Special attention will need to be given to custom sections on a case-by-case bas
|
|||||||
As we have changed the design of the CMS, the top bar for your custom sections is no longer needed. We've moved the
|
As we have changed the design of the CMS, the top bar for your custom sections is no longer needed. We've moved the
|
||||||
buttons that it once held down to the bottom.
|
buttons that it once held down to the bottom.
|
||||||
|
|
||||||
![](_images/cms22screenie.jpg)
|
![](/_images/cms22screenie.jpg)
|
||||||
|
|
||||||
|
|
||||||
### Classes added to 2.2 that may conflict
|
### Classes added to 2.2 that may conflict
|
||||||
|
@ -403,8 +403,8 @@ We have also moved all fields from the "Metadata" tab into the "Main Content" ta
|
|||||||
$fields->addFieldToTab('Root.Main', $myField);
|
$fields->addFieldToTab('Root.Main', $myField);
|
||||||
$fields->addFieldToTab('Root.Main', $myOtherField);
|
$fields->addFieldToTab('Root.Main', $myOtherField);
|
||||||
|
|
||||||
![Tab paths in 2.4](_images/tab-paths-before.png)
|
![Tab paths in 2.4](/_images/tab-paths-before.png)
|
||||||
![Tab paths in 3.0](_images/tab-paths-after.png)
|
![Tab paths in 3.0](/_images/tab-paths-after.png)
|
||||||
|
|
||||||
The old paths are rewritten automatically, but will be deprecated in the next point release.
|
The old paths are rewritten automatically, but will be deprecated in the next point release.
|
||||||
If you are working with tab objects directly in your `FieldSet`, you'll need to update
|
If you are working with tab objects directly in your `FieldSet`, you'll need to update
|
||||||
@ -421,7 +421,7 @@ to reduce UI clutter. You still need to address it through the usual tabset meth
|
|||||||
as the underlying object structure doesn't change. Once you add more tabs,
|
as the underlying object structure doesn't change. Once you add more tabs,
|
||||||
e.g. to the "Root.Main" tab in `SiteTree`, the tab bar automatically shows.
|
e.g. to the "Root.Main" tab in `SiteTree`, the tab bar automatically shows.
|
||||||
|
|
||||||
![Tab paths in 3.0 with a custom tab](_images/tab-paths-customtab.png)
|
![Tab paths in 3.0 with a custom tab](/_images/tab-paths-customtab.png)
|
||||||
|
|
||||||
### New `SiteTree::$description` field to describe purpose of a page type [sitetree-description]###
|
### New `SiteTree::$description` field to describe purpose of a page type [sitetree-description]###
|
||||||
|
|
||||||
|
Binary file not shown.
Before Width: | Height: | Size: 5.4 KiB |
Binary file not shown.
Before Width: | Height: | Size: 19 KiB |
Loading…
Reference in New Issue
Block a user