Merge pull request #1693 from jim-parry/docs/tutorial

Docs/tutorial

Author: jim-parry

user_guide_src/source/images/tutorial0.png

@@ -4,12 +4,15 @@ Installation
 
 CodeIgniter4 can be installed in a number of different ways: manually,
 using `Composer <https://getcomposer.org>`_, or using
-`Git <https://git-scm.com/>`_. If you are not sure which is most
-appropriate for you, read the introduction for
-each technique, and consider their pros and cons.
+`Git <https://git-scm.com/>`_. 
+Which is right for you?
 
-Once installed, there are several ways to run a
-CodeIgniter4 app. Read on :)
+- If you would like the simple "download & go" install that CodeIgniter3
+  is known for, choose the manual installation.
+- If you plan to add third party packages to your project, we
+  recommend the Composer installation.
+- If you are thinking of contributing to the framework,
+  then the Git installation is right for you.
 
 .. toctree::
     :titlesonly:

user_guide_src/source/images/tutorial1.png

@@ -11,7 +11,7 @@ From the command line, at your project root::
 
     php spark serve
 
-``htt[://localhost:8080`` in your browser should then show the default
+``http://localhost:8080`` in your browser should then show the default
 welcome page:
 
 |CodeIgniter4 Welcome|

user_guide_src/source/images/tutorial2.png

@@ -1,6 +1,5 @@
-##########
 Conclusion
-##########
+###############################################################################
 
 This tutorial did not cover all of the things you might expect of a
 full-fledged content management system, but it introduced you to the

user_guide_src/source/images/tutorial3.png

@@ -1,43 +1,43 @@
-#################
 Create news items
-#################
+###############################################################################
 
 You now know how you can read data from a database using CodeIgniter, but
 you haven't written any information to the database yet. In this section
 you'll expand your news controller and model created earlier to include
 this functionality.
 
 Create a form
--------------
+-------------------------------------------------------
 
 To input data into the database you need to create a form where you can
 input the information to be stored. This means you'll be needing a form
 with two fields, one for the title and one for the text. You'll derive
 the slug from our title in the model. Create the new view at
-*app/Views/news/create.php*.
+**app/Views/news/create.php**.
 
 ::
 
     <h2><?= esc($title); ?></h2>
 
     <?= \Config\Services::validation()->listErrors(); ?>
 
-    <form>
+    <form action="/news/create">
 
         <label for="title">Title</label>
         <input type="input" name="title" /><br />
 
-        <label for="text">Text</label>
-        <textarea name="text"></textarea><br />
+        <label for="body">Text</label>
+        <textarea name="body"></textarea><br />
 
         <input type="submit" name="submit" value="Create news item" />
 
     </form>
 
-There is only one thing here that probably look unfamiliar to you: the ``\Config\Services::validation()->listErrors()`` function. It is used to report
+There is only one thing here that probably look unfamiliar to you: the 
+``\Config\Services::validation()->listErrors()`` function. It is used to report
 errors related to form validation.
 
-Go back to your news controller. You're going to do two things here,
+Go back to your ``News`` controller. You're going to do two things here,
 check whether the form was submitted and whether the submitted data
 passed the validation rules. You'll use the :doc:`form
 validation <../libraries/validation>` library to do this.
@@ -51,7 +51,7 @@ validation <../libraries/validation>` library to do this.
 
         if (! $this->validate([
             'title' => 'required|min_length[3]|max_length[255]',
-            'text'  => 'required'
+            'body'  => 'required'
         ]))
         {
             echo view('templates/header', ['title' => 'Create a news item']);
@@ -64,7 +64,7 @@ validation <../libraries/validation>` library to do this.
             $model->save([
                 'title' => $this->request->getVar('title'),
                 'slug'  => url_title($this->request->getVar('title')),
-                'text'  => $this->request->getVar('text'),
+                'body'  => $this->request->getVar('body'),
             ]);
             echo view('news/success');
         }
@@ -80,7 +80,7 @@ above. You can read :doc:`more about this library
 here <../libraries/validation>`.
 
 Continuing down, you can see a condition that checks whether the form
-validation ran successfully. If it did not, the form is displayed, if it
+validation ran successfully. If it did not, the form is displayed; if it
 was submitted **and** passed all the rules, the model is called. This
 takes care of passing the news item into the model.
 This contains a new function, url\_title(). This function -
@@ -90,10 +90,14 @@ sure everything is in lowercase characters. This leaves you with a nice
 slug, perfect for creating URIs.
 
 After this, a view is loaded to display a success message. Create a view at
-**app/Views/news/success.php** and write a success message.
+**app/Views/news/success.php** and write a success message. 
 
-Model
------
+This could be as simple as:::
+
+    News item created successfully. 
+
+Model Updating
+-------------------------------------------------------
 
 The only thing that remains is ensuring that your model is setup
 to allow data to be saved properly. The ``save()`` method that was
@@ -109,14 +113,14 @@ fields in the ``$allowedFields`` property.
 
 ::
 
-    namespace App\Models;
+    <?php namespace App\Models;
     use CodeIgniter\Model;
 
     class NewsModel extends Model
     {
         protected $table = 'news';
 
-        protected $allowedFields = ['title', 'slug', 'text'];
+        protected $allowedFields = ['title', 'slug', 'body'];
     }
 
 This new property now contains the fields that we allow to be saved to the
@@ -126,10 +130,10 @@ This helps protect against Mass Assignment Vulnerabilities. If your model is
 handling your timestamps, you would also leave those out.
 
 Routing
--------
+-------------------------------------------------------
 
 Before you can start adding news items into your CodeIgniter application
-you have to add an extra rule to *Config/Routes.php* file. Make sure your
+you have to add an extra rule to **app/Config/Routes.php** file. Make sure your
 file contains the following. This makes sure CodeIgniter sees 'create'
 as a method instead of a news item's slug.
 
@@ -141,6 +145,28 @@ as a method instead of a news item's slug.
     $routes->get('(:any)', 'Pages::view/$1');
 
 Now point your browser to your local development environment where you
-installed CodeIgniter and add index.php/news/create to the URL.
-Congratulations, you just created your first CodeIgniter application!
+installed CodeIgniter and add ``/news/create`` to the URL.
 Add some news and check out the different pages you made.
+
+.. image:: ../images/tutorial3.png
+    :align: center
+    :height: 415px
+    :width: 45%
+
+.. image:: ../images/tutorial4.png
+    :align: center
+    :height: 415px
+    :width: 45%
+
+.. image:: ../images/tutorial9.png
+    :align: left
+ 
+
+Congratulations
+-------------------------------------------------------
+
+You just completed your first CodeIgniter4 application!
+
+The image to the left shows your project's **app** folder,
+with all of the files that you created in green.
+The two modified configuration files (Database & Routes) are not shown.