Permalink
Browse files

ENHANCEMENT Updated tutorial documentation (thanks to Cam Findlay and…

… Andy Adiwidjaja)
  • Loading branch information...
1 parent 013abcb commit 71b3fe5760e1b08b937d88f971988ad61e515706 @adiwidjaja adiwidjaja committed with chillu Jun 7, 2012
Showing with 349 additions and 525 deletions.
  1. +148 −237 docs/en/tutorials/1-building-a-basic-site.md
  2. +126 −158 docs/en/tutorials/2-extending-a-basic-site.md
  3. +75 −130 docs/en/tutorials/4-site-search.md
  4. BIN docs/en/tutorials/_images/2nd_level-cut.jpg
  5. BIN docs/en/tutorials/_images/articleholder.jpg
  6. BIN docs/en/tutorials/_images/cms-numbered.jpg
  7. BIN docs/en/tutorials/_images/create-staff.jpg
  8. BIN docs/en/tutorials/_images/data-collation.jpg
  9. BIN docs/en/tutorials/_images/einstein-small.jpg
  10. BIN docs/en/tutorials/_images/einstein.jpg
  11. BIN docs/en/tutorials/_images/home-first.jpg
  12. BIN docs/en/tutorials/_images/home-small.jpg
  13. BIN docs/en/tutorials/_images/home-template.jpg
  14. BIN docs/en/tutorials/_images/homepage-news.jpg
  15. BIN docs/en/tutorials/_images/homepage-type.jpg
  16. BIN docs/en/tutorials/_images/icons2.jpg
  17. BIN docs/en/tutorials/_images/menu-highlighted.jpg
  18. BIN docs/en/tutorials/_images/menu-two-level-small.jpg
  19. BIN docs/en/tutorials/_images/menu-two-level.jpg
  20. BIN docs/en/tutorials/_images/menu.jpg
  21. BIN docs/en/tutorials/_images/news-cms.jpg
  22. BIN docs/en/tutorials/_images/news-with-rss-small.jpg
  23. BIN docs/en/tutorials/_images/news.jpg
  24. BIN docs/en/tutorials/_images/pagetype-inheritance.jpg
  25. BIN docs/en/tutorials/_images/photo.jpg
  26. BIN docs/en/tutorials/_images/rss-feed.jpg
  27. BIN docs/en/tutorials/_images/rss.jpg
  28. BIN docs/en/tutorials/_images/searchform.jpg
  29. BIN docs/en/tutorials/_images/searchresults-small.jpg
  30. BIN docs/en/tutorials/_images/staff-section.jpg
  31. BIN docs/en/tutorials/_images/subtemplates-diagram.jpg
  32. BIN docs/en/tutorials/_images/title.jpg
  33. BIN docs/en/tutorials/_images/treeicons/home-file.gif
  34. BIN docs/en/tutorials/_images/treeicons/news-file.gif
  35. BIN docs/en/tutorials/_images/treeicons/search-file.gif
  36. BIN docs/en/tutorials/_images/tutorial1_2nd_level-cut.jpg
  37. BIN docs/en/tutorials/_images/tutorial1_addpage.jpg
  38. BIN docs/en/tutorials/_images/tutorial1_cms-basic.jpg
  39. BIN docs/en/tutorials/_images/tutorial1_cms-numbered-2b.jpg
  40. BIN docs/en/tutorials/_images/tutorial1_cms-numbered.jpg
  41. BIN docs/en/tutorials/_images/tutorial1_editpage-numbered.jpg
  42. BIN docs/en/tutorials/_images/tutorial1_home-small.jpg
  43. BIN docs/en/tutorials/_images/tutorial1_home-template.jpg
  44. BIN docs/en/tutorials/_images/tutorial1_homepage-type.jpg
  45. BIN docs/en/tutorials/_images/tutorial1_menu-two-level-small.jpg
  46. BIN docs/en/tutorials/_images/tutorial1_menu-two-level.jpg
  47. BIN docs/en/tutorials/_images/tutorial1_menu.jpg
  48. BIN docs/en/tutorials/_images/tutorial1_subtemplates-diagram.jpg
  49. BIN docs/en/tutorials/_images/tutorial1_url.jpg
  50. BIN docs/en/tutorials/_images/tutorial2_articleholder.jpg
  51. BIN docs/en/tutorials/_images/tutorial2_create-staff.jpg
  52. BIN docs/en/tutorials/_images/tutorial2_data-collation.jpg
  53. BIN docs/en/tutorials/_images/tutorial2_einstein.jpg
  54. BIN docs/en/tutorials/_images/tutorial2_homepage-news.jpg
  55. BIN docs/en/tutorials/_images/tutorial2_icons2.jpg
  56. BIN docs/en/tutorials/_images/tutorial2_news-cms.jpg
  57. BIN docs/en/tutorials/_images/tutorial2_news.jpg
  58. BIN docs/en/tutorials/_images/tutorial2_newslist.jpg
  59. BIN docs/en/tutorials/_images/tutorial2_pagetype-inheritance.jpg
  60. BIN docs/en/tutorials/_images/tutorial2_photo.jpg
  61. BIN docs/en/tutorials/_images/tutorial2_rss-feed.jpg
  62. BIN docs/en/tutorials/_images/tutorial2_staff-section.jpg
  63. BIN docs/en/tutorials/_images/tutorial4_search.png
  64. BIN docs/en/tutorials/_images/tutorial4_searchbox.png
  65. BIN docs/en/tutorials/_images/url.jpg
  66. BIN docs/en/tutorials/_images/welcome.png
@@ -12,7 +12,7 @@ follow this tutorial on any site of your own.
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/searchresults-small.jpg)
+![](_images/tutorial4_search.png)
## Creating the search form
@@ -27,110 +27,54 @@ After including that in your `_config.php` you will need to rebuild the database
The actual search form code is already provided in FulltextSearchable so when you add the enable line above to your
`_config.php` you can add your form as `$SearchForm`.
-### Custom CSS code
+In the simple theme, the SearchForm is already added to the header. We will go through the code and explain it.
-Add the following css code to the *themes/tutorial/css/layout.css* file. This will style the header form and search
-results page.
-
- :::css
- #Header form {
- float:right;
- width:160px;
- margin:25px 25px 0px 25px;
- }
- #Header form * {
- display:inline !important;
- }
- #Header form div {
- }
- #Header form input.text {
- width:110px;
- color:#000;
- background:#f0f0f0;
- border:1px solid #aaa;
- padding:3px;
- }
- #Header form input.action {
- font-weight:bold;
- }
-
- .searchResults h2 {
- font-size:2.2em;
- font-weight:normal;
- color:#0083C8;
- margin-bottom:15px;
- }
- .searchResults p.searchQuery {
- color:#333;
- margin-bottom:10px;
- }
-
- .searchResults ul#SearchResults li {
- margin-bottom:20px;
- }
- ul#SearchResults p {
- font-size:1.1em;
- font-weight:normal;
- line-height:2em;
- color:#333;
- }
- ul#SearchResults a.searchResultHeader {
- font-size:1.3em;
- font-weight:bold;
- color:#0083C8;
- text-decoration:none;
- margin:20px 0 8px 0;
- padding-left:20px;
- background:url(../images/treeicons/search-file.gif) no-repeat left center;
- }
- ul#SearchResults a {
- text-decoration:none;
- color:#0083C8;
- }
- ul#SearchResults a:hover {
- border-bottom:1px dotted #0083C8;
- }
## Adding the search form
-We then just need to add the search form to the template. Add *$SearchForm* to the 'Header' div in
-*themes/tutorial/templates/Page.ss*.
+To add the search form, we can add `$SearchForm` anywhere in our templates. In the simple theme, this is in
+*themes/simple/templates/Includes/Header.ss*
-*themes/tutorial/templates/Page.ss*
+*themes/simple/templates/Includes/Header.ss*
:::ss
- <div id="Header">
- $SearchForm
- <h1>$Title</h1>
- </div>
+ ...
+ <% if SearchForm %>
+ <span class="search-dropdown-icon">L</span>
+ <div class="search-bar">
+ $SearchForm
+ <span class="search-bubble-arrow">}</span>
+ </div>
+ <% end_if %>
+ <% include Navigation %>
+This results in:
-![](_images/searchform.jpg)
+![](_images/tutorial4_searchbox.png)
## Showing the results
-Next we need to create the *results* function.
+The results function is already included in the `ContentControllerSearchExtension` which
+is applied via `FulltextSearchable::enable()`
-*mysite/code/Page.php*
+*cms/code/search/ContentControllerSearchExtension.php*
:::php
- class Page_Controller extends ContentController {
+ class ContentControllerSearchExtension extends Extension {
...
- public function results($data, $form){
+ function results($data, $form, $request) {
$data = array(
'Results' => $form->getResults(),
'Query' => $form->getSearchQuery(),
- 'Title' => 'Search Results'
+ 'Title' => _t('SearchForm.SearchResults', 'Search Results')
);
- $this->Query = $form->getSearchQuery();
-
- return $this->customise($data)->renderWith(array('Page_results', 'Page'));
+ return $this->owner->customise($data)->renderWith(array('Page_results', 'Page'));
}
}
-First we populate an array with the data we wish to pass to the template - the search results, query and title of the
+The code populates an array with the data we wish to pass to the template - the search results, query and title of the
page. The final line is a little more complicated.
When we call a function by its url (eg http://localhost/home/results), SilverStripe will look for a template with the
@@ -153,67 +97,68 @@ function, and then attempt to render it with *Page_results.ss*, falling back to
## Creating the template
-Lastly we need to create the template for the search page. This template uses all the same techniques used in previous
+Lastly we need the template for the search page. This template uses all the same techniques used in previous
tutorials. It also uses a number of pagination variables, which are provided by the `[api:DataObjectSet]`
class.
-*themes/tutorial/templates/Layout/Page_results.ss*
+*themes/simple/templates/Layout/Page_results.ss*
:::ss
<div id="Content" class="searchResults">
- <h2>$Title</h2>
-
- <% if Query %>
- <p class="searchQuery"><strong>You searched for &quot;{$Query}&quot;</strong></p>
- <% end_if %>
-
- <% if Results %>
- <ul id="SearchResults">
- <% control Results %>
- <li>
- <a class="searchResultHeader" href="$Link">
- <% if MenuTitle %>
- $MenuTitle
- <% else %>
- $Title
- <% end_if %>
- </a>
- <p>$Content.LimitWordCountXML</p>
- <a class="readMoreLink" href="$Link" title="Read more about &quot;{$Title}&quot;">Read more about &quot;{$Title}&quot;...</a>
- </li>
- <% end_control %>
- </ul>
- <% else %>
- <p>Sorry, your search query did not return any results.</p>
- <% end_if %>
-
- <% if Results.MoreThanOnePage %>
- <div id="PageNumbers">
- <% if Results.NotLastPage %>
- <a class="next" href="$Results.NextLink" title="View the next page">Next</a>
- <% end_if %>
- <% if Results.NotFirstPage %>
- <a class="prev" href="$Results.PrevLink" title="View the previous page">Prev</a>
- <% end_if %>
- <span>
- <% control Results.Pages %>
- <% if CurrentBool %>
- $PageNum
- <% else %>
- <a href="$Link" title="View page number $PageNum">$PageNum</a>
- <% end_if %>
- <% end_control %>
- </span>
- <p>Page $Results.CurrentPage of $Results.TotalPages</p>
- </div>
- <% end_if %>
+ <h1>$Title</h1>
+
+ <% if Query %>
+ <p class="searchQuery"><strong>You searched for &quot;{$Query}&quot;</strong></p>
+ <% end_if %>
+
+ <% if Results %>
+ <ul id="SearchResults">
+ <% control Results %>
+ <li>
+ <a class="searchResultHeader" href="$Link">
+ <% if MenuTitle %>
+ $MenuTitle
+ <% else %>
+ $Title
+ <% end_if %>
+ </a>
+ <p>$Content.LimitWordCountXML</p>
+ <a class="readMoreLink" href="$Link"
+ title="Read more about &quot;{$Title}&quot;"
+ >Read more about &quot;{$Title}&quot;...</a>
+ </li>
+ <% end_control %>
+ </ul>
+ <% else %>
+ <p>Sorry, your search query did not return any results.</p>
+ <% end_if %>
+
+ <% if Results.MoreThanOnePage %>
+ <div id="PageNumbers">
+ <% if Results.NotLastPage %>
+ <a class="next" href="$Results.NextLink" title="View the next page">Next</a>
+ <% end_if %>
+ <% if Results.NotFirstPage %>
+ <a class="prev" href="$Results.PrevLink" title="View the previous page">Prev</a>
+ <% end_if %>
+ <span>
+ <% control Results.Pages %>
+ <% if CurrentBool %>
+ $PageNum
+ <% else %>
+ <a href="$Link" title="View page number $PageNum">$PageNum</a>
+ <% end_if %>
+ <% end_control %>
+ </span>
+ <p>Page $Results.CurrentPage of $Results.TotalPages</p>
+ </div>
+ <% end_if %>
</div>
Then finally add ?flush=1 to the URL and you should see the new template.
-![](_images/searchresults.jpg)
-
+![](_images/tutorial4_search.png)
## Summary
Deleted file not rendered
Deleted file not rendered
Deleted file not rendered
Deleted file not rendered
Deleted file not rendered
Deleted file not rendered
Deleted file not rendered
Deleted file not rendered
Deleted file not rendered
Deleted file not rendered
Deleted file not rendered
Deleted file not rendered
Deleted file not rendered
Deleted file not rendered
Deleted file not rendered
Deleted file not rendered
Deleted file not rendered
Deleted file not rendered
Deleted file not rendered
Deleted file not rendered
Deleted file not rendered
Deleted file not rendered
Deleted file not rendered
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Deleted file not rendered
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.
Diff not rendered.

0 comments on commit 71b3fe5

Please sign in to comment.