Finish Day 1

2020-11-01 19:29:23 -05:00
17 changed files with 115 additions and 3 deletions
--- a/docs/day1.md
+++ b/docs/day1.md
@@ -124,7 +124,7 @@ Before we can dive into our web project we have to cover some Python basics. Let

    ![print_gb](img/day1/print_gb.png)

-1. Finally add `def middle_stuff():` above the remaining code
+1. Finally add `def middle_stuff():` above the remaining cod

    ![middle_stuff](img/day1/middle_stuff.png)

@@ -140,6 +140,118 @@ Before we can dive into our web project we have to cover some Python basics. Let
    print_goodbye()
    ```

-3. Type `python my_program.py` in the terminal and press enter. Now everything prints in order!
+1. Type `python my_program.py` in the terminal and press enter. Now everything prints in order!

-    ![in_order](img/day1/in_order.png)
+    ![in_order](img/day1/in_order.png)
+
+## A Django Project
+
+Now that we can write some basic python we can begin our django project. Let's start by creating a view.
+
+1. Close out of my_program.py
+
+1. In the terminal type `django-admin startapp mysite`
+
+    ![startapp](img/day1/startapp.gif)
+
+1. Expand the `config` folder by clicking on it
+
+    ![config](img/day1/config.png)
+
+1. Click on `settings.py` to open it
+
+1. Scroll down to line 33 and add `mysite` above `'django.contrib.admin'`
+
+    ![add_mysite](img/day1/add_mysite.png)
+
+1. Save with <kbd>ctrl</kbd>+<kbd>S</kbd>
+
+1. Click on `urls.py` to open it
+
+    ![urls](img/day1/urlspy.png)
+
+1. On line 17 add `, include` after `from django.urls import path`
+
+    ![include](img/day1/include.png)
+
+1. Add `path('', include('mysite.urls')),` above `path('admin/', admin.site.urls),` 
+
+    ![mysiteurls](img/day1/mysiteurls.png)
+
+1. Expand the newly created `mysite` folder by clicking on it
+
+    ![mysite](img/day1/mysite.png)
+
+1. Right click on `mysite` and click "New Folder". Name it `templates`
+
+    ![templates](img/day1/templates.gif)
+
+1. Right click on `templates` and click "New Folder". Name it `mysite`
+
+    ![mysitetemplate](img/day1/mysitetemplates.gif)
+
+1. Right click on the `mysite` folder inside `templates` and click "New File". Name it `index.html`
+
+    ![index](img/day1/index.gif)
+
+1. Open `index.html` by clicking on it
+
+1. Add the following to index.html
+
+    ```html
+    <!DOCTYPE html>
+    <body>
+        {{ data }}
+    </body>
+    </html>
+    ```
+
+    ![indexdata](img/day1/indexdata.png)
+
+1. Save with <kbd>ctrl</kbd>+<kbd>S</kbd>
+
+1. Open `views.py` by clicking on it
+
+1. In views.py under line 3 add the following:
+
+    ```python
+    def index(request):
+        return render(
+            request, 
+            "mysite/index.html", 
+            {"data": "hello"}
+        )
+    ```
+
+    ![defindex](img/day1/defindex.png)
+
+1. Save with <kbd>ctrl</kbd>+<kbd>S</kbd>
+
+1. Right click on `mysite` and click "New File". Name it `urls.py`
+
+    ![createurls](img/day1/createurls.gif)
+
+1. Add the following to urls.py:
+
+    ```python
+    from django.urls import path
+    from . import views
+
+    urlpatterns = [
+        path('', views.index),
+    ]
+    ```
+
+    ![indexpath](img/day1/indexpath.png)
+
+1. Save with <kbd>ctrl</kbd>+<kbd>S</kbd>
+
+1. In the terminal type `python manage.py runserver`
+
+    ![runserver](img/day1/runserver.gif)
+
+1. In your browser navigate to <http://localhost:8000>
+
+    ![hello](img/day1/hello.gif)
+
+You've now passed python data to a browser! We'll explore what this really means in Day 2.
--- a/docs/img/day1/add_mysite.png
+++ b/docs/img/day1/add_mysite.png
--- a/docs/img/day1/config.png
+++ b/docs/img/day1/config.png
--- a/docs/img/day1/createurls.gif
+++ b/docs/img/day1/createurls.gif
--- a/docs/img/day1/defindex.png
+++ b/docs/img/day1/defindex.png
--- a/docs/img/day1/hello.gif
+++ b/docs/img/day1/hello.gif
--- a/docs/img/day1/include.png
+++ b/docs/img/day1/include.png
--- a/docs/img/day1/index.gif
+++ b/docs/img/day1/index.gif
--- a/docs/img/day1/indexdata.png
+++ b/docs/img/day1/indexdata.png
--- a/docs/img/day1/indexpath.png
+++ b/docs/img/day1/indexpath.png
--- a/docs/img/day1/mysite.png
+++ b/docs/img/day1/mysite.png
--- a/docs/img/day1/mysitetemplates.gif
+++ b/docs/img/day1/mysitetemplates.gif
--- a/docs/img/day1/mysiteurls.png
+++ b/docs/img/day1/mysiteurls.png
--- a/docs/img/day1/runserver.gif
+++ b/docs/img/day1/runserver.gif
--- a/docs/img/day1/startapp.gif
+++ b/docs/img/day1/startapp.gif
--- a/docs/img/day1/templates.gif
+++ b/docs/img/day1/templates.gif
--- a/docs/img/day1/urlspy.png
+++ b/docs/img/day1/urlspy.png