# Day 1

Before we can dive into our web project we have to cover some Python basics. Let's talk about writing a python program.

## The Interactive Python Prompt

1. Make sure you have a (venv) to the left of your terminal cursor. Type `python` and press enter.

    **NOTE**: This is not a terminal! You cannot run your django server from here. Before you can do things in the terminal you must exit by typing `exit()`!

    ![python_prompt](img/day1/python_prompt.gif)

2. Type `1+1` and press enter. You should see `2` returned. As long as you see the `>>>` to the left of your cursor you can type any python code you want and press enter to execute it.

3. Type `x=1` and press enter. Nothing should return.

4. Type `x` and press enter. You should see `1` return. We've give `x` the value of `1`

5. Type `x+1` and press enter. You should see `2` returned just like `1+1` above.

6. Type `x=3` and press enter. Nothing should return.

7. Type `x` and press enter. You should see `3` return. Variables in Python can be reassigned to anything else.

8. Type `x="hello"` and press enter. Nothing should return.

9. Type `x` and press enter. You should see `hello` printed to the screen. Variables in python do not have a "type" - they can be integers, strings, floats, etc and can switch between them at will.

10. Type `my_name = "<your name here>"` and press enter. Nothing should return

11. Type `my_name` and press enter. You should see your name printed to your terminal. `my_name` is a much better variable name than `x`. It describes the thing it stores. Please use variable names that are descriptive.

12. Type `my_coordinates = (1,2)` and press enter. Nothing should return.

13. Type `my_coordinates` and press enter. `(1,2)` should return. This is called a `tuple`. It's useful for storing multiple points of data.

14. Type `address = (123, "lane ave", "Columbus", "OH", 43212)` and press enter. Nothing should return

15. Type `address` and press enter. You should see the address print to the terminal. Tuples can hold multiple types of data - 123 is a number and "lane ave" is a string.

16. Type `len(address)` and press enter. You should see `5` printed to the terminal. There are 5 "things" in the tuple:

    (1) `123`

    (2) `"lane ave"`

    (3) `**"Columbus"`

    (4) `"OH"`

    (5) `43212`

17. Type `address[0]` and press enter. You should see `123` printed to the terminal. You just accessed the first item in the tuple. Tuples and other collections start at 0 and count up.

18. Type `address[1]` and press enter. You should see `"lane ave"` print to the terminal. You just accessed the second item in the tuple

19. Type `vocabulary = {"apple": "the usually round, red or yellow, edible fruit of a small tree, Malus sylvestris, of the rose family.", "banana": "a tropical plant of the genus Musa, certain species of which are cultivated for their nutritious fruit."}` and press enter. Nothing should return.

20. Type `vocabulary` and press enter. {"apple": ...} should print to the terminal. This is called a dictionary.

21. Type `vocabulary["apple"]` and press enter. `'the usually round, red or yellow, edible fruit of a small tree, Malus sylvestris, of the rose family.'` should print to the terminal. You just access the definition of apple. Much like tuples can be accessed with `address[0]` or `address[1]`, dictionary values can be accessed by supplying the keyword, or key for short.

22. Type `exit()` and press enter. You should no longer see `>>>` to the left of the cursor.

## A Python Program

1. Create a new file called `my_program.py` by clicking the "add file" icon in the top left of VSCode.

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

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

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

2. In this file type `print('hello, world!')` and save with ++ctrl++ + S

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

3. In the terminal type `python my_program.py` and press enter. You should see `hello, world!` printed to the terminal.

    ![run_hw](img/day1/run_hw.gif)

4. Congratulations! You ran your first python file. Just like the python command prompt above, running `python <filename>` on a file with python code in it will execute that python code. Now we can run multiple lines of python at once!

5. Below `print('hello, world!')` type `print('goodbye!)`

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

6. Below `print('goodbye')` type

    ```python
    x = 1
    y = 2
    print(x + y)
    my_name = "<your name>"
    print(my_name)
    ```

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

7. Save the file with ++ctrl++ + S. In your terminal type `python myprogram.py` and press enter. You should see

    ```bash
    hello, world!
    goodbye!
    3
    Reese
    ```

    printed to the terminal

8. This is out of order. We want to print "goodbye" last. Let's fix that with functions.

9. Above `print('hello, world!')` type `def print_hello():`

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

10. Indent `print('hello, world!')` by pressing ++tab++

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

11. Give 'goodbye' the same treatment. This time type `def print_goodbye():`

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

12. Finally add `def middle_stuff():` above the remaining cod

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

13. Save the file with ++ctrl++ + S. Now type `python my_program.py` in the terminal and press enter. Nothing will return.

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

14. We've given our snippets of code "names" by adding a "def" above them. These are called functions. We can call them in any order we want. Let's call them in the correct order by using their names. Add the following to the bottom of my_program.py

    ```python
    print_hello()
    middle_stuff()
    print_goodbye()
    ```

15. Type `python my_program.py` in the terminal and press enter. Now everything prints in order!

    ![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

2. In the terminal type `django-admin startapp mysite`

    ![startapp](img/day1/startapp.gif)

3. Expand the `config` folder by clicking on it

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

4. Click on `settings.py` to open it

5. Scroll down to line 33 and add `mysite` above `'django.contrib.admin'`

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

6. Save with ++ctrl++ + S

7. Click on `urls.py` to open it

    ![urls](img/day1/urlspy.png)

8. On line 17 add `, include` after `from django.urls import path`

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

9. Add `path('', include('mysite.urls')),` above `path('admin/', admin.site.urls),`

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

10. Expand the newly created `mysite` folder by clicking on it

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

11. Right click on `mysite` and click "New Folder". Name it `templates`

    ![templates](img/day1/templates.gif)

12. Right click on `templates` and click "New Folder". Name it `mysite`

    ![mysitetemplate](img/day1/mysitetemplates.gif)

13. Right click on the `mysite` folder inside `templates` and click "New File". Name it `index.html`

    ![index](img/day1/index.gif)

14. Open `index.html` by clicking on it

15. Add the following to index.html

    ```html
    <!DOCTYPE html>

    <body>
        {{ data }}
    </body>

    </html>
    ```

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

16. Save with ++ctrl++ + S

17. Open `views.py` by clicking on it

18. 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)

19. Save with ++ctrl++ + S

20. Right click on `mysite` and click "New File". Name it `urls.py`

    ![createurls](img/day1/createurls.gif)

21. Add the following to urls.py:

    ```python
    from django.urls import path
    from . import views

    urlpatterns = [
        path('', views.index),
    ]
    ```

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

22. Save with ++ctrl++ + S

23. In the terminal type `python manage.py runserver`

    ![runserver](img/day1/runserver.gif)

24. 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.
