Skip to content

Commit ce5a651

Browse files
tjbelltjbell
committedAug 14, 2018
docs: tasks rewrite
·
v2.0.0v1.0.0
1 parent 2dd481a commit ce5a651

File tree

3 files changed

+319
-204
lines changed

3 files changed

+319
-204
lines changed
 

‎scratch_tasks.md

+105
Original file line numberDiff line numberDiff line change
@@ -39,3 +39,108 @@ Next, create a new folder called `admin` in the `templates` folder, then create
3939
## 2.6 - Navigation
4040

4141
@pytest.mark.navigation We want to allow the user to navigate to the admin from the front page. In the `index.html` template file create a link to the main admin page by creating an `<a>` tag nested in the `<div>` with the two classes `columns` and `is-one-fifth`. The `<a>` tag should have an `href` with the value `/admin` and the classes `button`, `is-info`, and `is-pulled-right`. In the admin we allow the user to create a new job. In the `admin/index.html` template file create a link to the new job form by creating an `<a>` tag nested in the `<div>` with the two classes `columns` and `is-one-fifth`. The `<a>` tag should have an `href` with the value `/admin/create` and the classes `button`, `is-info`, and `is-pulled-right`.
42+
43+
44+
locate the `jobs` function. Above the `render_template` function call, call the `query_db`function. Pass in the SQL statement: `'SELECT job.id, job.title, job.description, job.salary, employer.id as employer_id, employer.name as employer_name FROM job JOIN employer ON employer.id = job.employer_id'`. Assign the results of the call to a variable called `jobs`. In the `render_template` function, pass a keyword argument of `jobs=jobs`.
45+
46+
## 4.2 - Individual Job Details
47+
48+
@pytest.mark.app-individual-job-details To bring back just one job from the database we are going to use a where clause. In the where clause we will need a `job_id`. We are going to get this from the URL. In `app.py` locate the `job` function. In the route decorator for the function after the URL path `/job` add `/<job_id>`. To use this `job_id` we also need to pass it to the job function add `job_id` to the parameter list of the `job` function. Above the `render_template` function, call the `query_db` function and assign the results of the call to a `job` variable. Pass the function three arguments:
49+
- SQL Query: `'SELECT job.id, job.title, job.description, job.salary, employer.id as employer_id, employer.name as employer_name FROM job JOIN employer ON employer.id = job.employer_id WHERE job.id = ?'`
50+
- List Literal: [job_id]
51+
- True: This will bring back only one result.
52+
53+
In the `render_template` function, pass a keyword argument of `job=job`
54+
55+
## 4.3 - Individual Employer Details
56+
57+
@pytest.mark.app-individual-employer-details Similar to the `job` function the employer route will only need the details of one employer. Locate the `employer` function in `app.py`. Again we need the unique id of an employer and will receive this from the URL. Add `/<employer_id>` in the route decorator after `/employer`. So that the `employer` function has access to this value add `employer_id`to the parameter list. Make a call to `query_db` and assign the return value to `employer`. Pass in the arguments:
58+
- SQL Query: 'SELECT * FROM employer WHERE id=?'
59+
- List Literal: [employer_id]
60+
- True: This will bring back only one result.
61+
62+
In the `render_template` function, pass a keyword argument of `employer=employer`
63+
64+
## 4.4 - All Employer Jobs
65+
66+
@pytest.mark.app-all-employer-jobs On the employer details page, we want to display all of the employers’ jobs. In the `employer` function in `app.py` below the `employer` variable, add a call to the `query_db` function and assign the results to a variable called `jobs`. Pass the function two arguments:
67+
- SQL Query: `'SELECT job.id, job.title, job.description, job.salary FROM job JOIN employer ON employer.id = job.employer_id WHERE employer.id = ?'`
68+
- List Literal: [employer_id]
69+
70+
In the `render_template` function, add another keyword argument of `jobs=jobs`
71+
72+
## 4.5 - Job Card
73+
74+
@pytest.mark.job-card Open the file `templates/_jobs.html` find the `<p>` tag with a class of `card-header-title`. Add an `<a>` tag with an `href` of `{{ url_for('job', job_id=job['id']) }}`. The content should be `{{ job['title'] }}`. Next find the `<div>` with a class of `content`. To this tag add a `<p>` tag and in this tag add the following:
75+
- `<a>` tag with an `href` of `{{ url_for('employer', employer_id=job['employer_id']) }}`. The content should be `{{ job['employer_name'] }}`. Add line break.
76+
- ${{ job['salary'] }}. Add line break.
77+
- {{ job['description'] }}
78+
79+
## 4.6 -Display All Jobs
80+
81+
@pytest.mark.display-all-jobs Open the file `templates/index.html` above the `{% endblock %}` add a `<div>` with two classes `columns` and `is-multiline`. In the div add a `for in` loop that loops through all jobs. Use the `{% %}` template syntax, don’t forget about ending the `for` loop. In the `for` loop add a `<div>` with two classes `column` and `is-half`. Too this `<div>` add the following template code:
82+
83+
```
84+
{% with job=job %}
85+
{% include "_job.html" %}
86+
{% endwith %}
87+
```
88+
89+
## 4.7 - Display Individual Job Details
90+
91+
@pytest.mark.display-individual-job-details In `templates/job.html` add a template block called `content` using the `{% %}` template markup. In the template block add the following template code:
92+
93+
```
94+
{% with job=job %}
95+
{% include "_job.html" %}
96+
{% endwith %}
97+
```
98+
99+
## 4.8 - Display Individual Employer Details
100+
101+
@pytest.mark.display-individual-employer-details Open `templates/employer.html` as the first thing in the template block add the following HTML:
102+
103+
- `<div>`
104+
- Nested in the `<div>` add an `<h1>` with the content {{ employer['name'] }}
105+
- Nested in the `<div>` add a`<div>` with a class of `description`
106+
- Nested in the description `<div>`add a`<p>` with the content {{ employer['description'] }}
107+
108+
## 4.9 -Display All Employer Jobs
109+
110+
@pytest.mark.display-all-employer-jobs Open the file `templates/employer.html` below the jobs `<h2>` add a `<div>` with two classes `columns` and `is-multiline`. In the div add a `for in` loop that loops through all jobs. Use the `{% %}` template syntax, don’t forget about ending the `for` loop. In the `for` loop add a `<div>` with two classes `column` and `is-half`. To the `<div>` add the following template code:
111+
112+
```
113+
{% with job=job %}
114+
{% include "_job.html" %}
115+
{% endwith %}
116+
```
117+
118+
# Module 08 - Add Jobs
119+
120+
## 8.1 - Admin Route
121+
122+
@pytest.mark.app-admin-route We will display all jobs on the admin page. To start, in `app.py` create a basic route that displays the contents of the admin index template. Create a function called `admin` and attach a `route()` decorator with the URL of `/admin`. In the body of the function use the `query_db` function to get all jobs from the database. The SQL can be found in other routes. Next, return a call to the `render_template()` passing in the `admin/index.html` template and the correct keyword arguments.
123+
124+
## 8.2 - Admin Create Job Route
125+
126+
@pytest.mark.app-admin-create-job-route In `app.py` create a route at the path `/admin/create` that accepts the methods 'GET' and 'POST'.
127+
128+
## 8.3 - Check for POST method
129+
130+
@pytest.mark.app-admin-check-for-post-method In the body of your route check if data has been posted then create four variables `title`, `description`, `salary`, and `employer_id`. Set them equal to their respective `request.form` values. Create an `error` variable set to `None`.
131+
132+
## 8.3 - Check for Values
133+
134+
@pytest.mark.app-admin-check-for-values In the body of the post `if` statement in your route function in `app.py`, below the variables, check if there is a value for `title`, and `employer_id`. If either is empty set `error` to an appropriate error message i.e. 'Title field is required.'
135+
136+
## 8.4 - Check for Error
137+
138+
@pytest.mark.app-admin-check-for-error Still in your route function below the value checks add an `if` statement that checks if `error` is `None`. If there are no errors we are going to add the form values to the database. Connect to the database and commit the changes.
139+
**Hint: The SQL is `'INSERT INTO job (title, description, salary, employer_id) VALUES (?, ?, ?, ?)'`**
140+
141+
If there are errors `flash` the error. **Hint: `else` statement**
142+
143+
## 8.5 - Admin Navigation
144+
145+
@pytest.mark.admin-navigation Find the admin index template and add an href attribute to the `New Job` link. Send the user to the URL ``/admin/create`. Open create job template and find the cancel anchor tag. Point the link back to the admin page using `url_for()`.
146+

‎tasks.md

+194-108
Original file line numberDiff line numberDiff line change
@@ -80,11 +80,15 @@ For now let’s setup a basic route that displays our simplified `index.html` te
8080
- Attach a `route()` decorator with the URL of `/` to the `jobs` function.
8181
- Attach an additional route decorator of `/jobs`. **Note: The `jobs` function can now be reached at `/` and `/jobs`**
8282

83-
# Preview
84-
At this point you have a working application with a single route. Try it out:
85-
- Open a terminal at the root of the project
86-
- Run the command `flask run`.
87-
- Open a browser and navigate to the URL: `http://localhost:5000`. **Note: Appending `/jobs` should display the same page.**
83+
**Preview**
84+
85+
At this point you have a working application with a single route. Try it out:
86+
87+
- Open a terminal at the root of the project
88+
- Run the command `flask run`.
89+
- Open a browser and navigate to the URL: `http://localhost:5000`.
90+
91+
**Note: Appending `/jobs` should display the same page.**
8892

8993
# Module 02 - Base Template and Styling
9094

@@ -116,12 +120,13 @@ For the `href` use the mustache template markup `{{}}` and the flask `url_for()`
116120
- Open `index.html`, above the `<h1>` use the template markup `{% %}` and the extends tag to inherit `layout.html`.
117121
- Wrap the `<h1>` element in a `block` called `content`.
118122

119-
# Preview
120-
At this point you have a styled application.
121-
Check out the styles:
122-
- Open a terminal at the root of the project
123-
- Run the command `flask run`.
124-
- Open a browser and navigate to the URL: `http://localhost:5000`.
123+
**Preview**
124+
125+
At this point you have a styled application. Check out the styles:
126+
127+
- Open a terminal at the root of the project
128+
- Run the command `flask run`.
129+
- Open a browser and navigate to the URL: `http://localhost:5000`.
125130

126131
# Module 03 - Preparing for Dynamic Content
127132

@@ -131,7 +136,7 @@ For the `href` use the mustache template markup `{{}}` and the flask `url_for()`
131136

132137
## 3.2 - Import Global Namespace
133138

134-
@pytest.mark.app-import-global-namespace To provide access to the database throughout the application import the global helper `g` from `flask`. **Hint: the `from` statement already exists add `g` to the `import` comma separated list.
139+
@pytest.mark.app-import-global-namespace To provide access to the database throughout the application import the global helper `g` from `flask`. **Hint: the `from` statement already exists add `g` to the `import` comma separated list.**
135140

136141
## 3.3 - Database Path
137142

@@ -196,162 +201,243 @@ In the function body:
196201

197202
@pytest.mark.app-close-the-connection-decorator To ensure the `close_connection` function is called when the `app_context` is destroyed give decorate it with `@app.teardown_appcontext`.
198203

199-
# Module 04 - Display Jobs
204+
# Module 04 - Display All Jobs
200205

201-
## 4.1 - All Jobs
206+
## 4.1 - Template Macros
202207

203-
@pytest.mark.app-jobs In `app.py` locate the `jobs` function. Above the `render_template` function call, call the `query_db`function. Pass in the SQL statement: `'SELECT job.id, job.title, job.description, job.salary, employer.id as employer_id, employer.name as employer_name FROM job JOIN employer ON employer.id = job.employer_id'`. Assign the results of the call to a variable called `jobs`. In the `render_template` function, pass a keyword argument of `jobs=jobs`.
208+
@pytest.mark.template-macros In the template folder create a new file called `_macros.html`.
204209

205-
## 4.2 - Individual Job Details
210+
## 4.2 - Show Job Macro Definition
206211

207-
@pytest.mark.app-individual-job-details To bring back just one job from the database we are going to use a where clause. In the where clause we will need a `job_id`. We are going to get this from the URL. In `app.py` locate the `job` function. In the route decorator for the function after the URL path `/job` add `/<job_id>`. To use this `job_id` we also need to pass it to the job function add `job_id` to the parameter list of the `job` function. Above the `render_template` function, call the `query_db` function and assign the results of the call to a `job` variable. Pass the function three arguments:
208-
- SQL Query: `'SELECT job.id, job.title, job.description, job.salary, employer.id as employer_id, employer.name as employer_name FROM job JOIN employer ON employer.id = job.employer_id WHERE job.id = ?'`
209-
- List Literal: [job_id]
210-
- True: This will bring back only one result.
212+
@pytest.mark.show-job-macro-definition In `_macros.html` create a template macro, using the `macro` tag, called `show_job`. `show_job` should take one parameter called `job`. Don't forgot to end the macro.
211213

212-
In the `render_template` function, pass a keyword argument of `job=job`
214+
## 4.3 - Show Job Macro HTML
213215

214-
## 4.3 - Individual Employer Details
216+
@pytest.mark.show-job-macro-html Locate the `template.html` file in the root of the project. Open it and find the code labeled
217+
`<!-- show_job -->`. Copy the code to the body of the `show_job` macro in `_macros.html`.
215218

216-
@pytest.mark.app-individual-employer-details Similar to the `job` function the employer route will only need the details of one employer. Locate the `employer` function in `app.py`. Again we need the unique id of an employer and will receive this from the URL. Add `/<employer_id>` in the route decorator after `/employer`. So that the `employer` function has access to this value add `employer_id`to the parameter list. Make a call to `query_db` and assign the return value to `employer`. Pass in the arguments:
217-
- SQL Query: 'SELECT * FROM employer WHERE id=?'
218-
- List Literal: [employer_id]
219-
- True: This will bring back only one result.
219+
## 4.4 - Show Job Macro Header
220220

221-
In the `render_template` function, pass a keyword argument of `employer=employer`
221+
@pytest.mark.show-job-macro-header Still in the body of the `show_job` macro in `_macros.html` find the `<p>` tag with a class of `card-header-title`.
222+
- Add an `<a>` tag with an `href` of `{{ url_for('job', job_id=job['id']) }}`.
223+
- The content should be `{{ job['title'] }}`.
222224

223-
## 4.4 - All Employer Jobs
225+
## 4.5 - Show Job Macro Body
224226

225-
@pytest.mark.app-all-employer-jobs On the employer details page, we want to display all of the employers’ jobs. In the `employer` function in `app.py` below the `employer` variable, add a call to the `query_db` function and assign the results to a variable called `jobs`. Pass the function two arguments:
226-
- SQL Query: `'SELECT job.id, job.title, job.description, job.salary FROM job JOIN employer ON employer.id = job.employer_id WHERE employer.id = ?'`
227-
- List Literal: [employer_id]
227+
@pytest.mark.show-job-macro-body Next find the `<div>` with a class of `content` in the `show_job` macro and add a `<p>` tag.
228+
In `<p>` tag add the following:
229+
- `<a>` tag with an `href` of `{{ url_for('employer', employer_id=job['employer_id']) }}`.The content should be `{{ job['employer_name'] }}`.
230+
- Line break
231+
- ${{ job['salary'] }}
232+
- Line break
233+
- {{ job['description'] }}
228234

229-
In the `render_template` function, add another keyword argument of `jobs=jobs`
235+
## 4.6 - Show Jobs Macro Definition
230236

231-
## 4.5 - Job Card
237+
@pytest.mark.show-jobs-macro-definition In `_macros.html` create a template macro using the `macro` tag call it `show_jobs`. `show_jobs` should take one parameter called `jobs`. Don't forgot to end the macro.
232238

233-
@pytest.mark.job-card Open the file `templates/_jobs.html` find the `<p>` tag with a class of `card-header-title`. Add an `<a>` tag with an `href` of `{{ url_for('job', job_id=job['id']) }}`. The content should be `{{ job['title'] }}`. Next find the `<div>` with a class of `content`. To this tag add a `<p>` tag and in this tag add the following:
234-
- `<a>` tag with an `href` of `{{ url_for('employer', employer_id=job['employer_id']) }}`. The content should be `{{ job['employer_name'] }}`. Add line break.
235-
- ${{ job['salary'] }}. Add line break.
236-
- {{ job['description'] }}
239+
## 4.7 - Show Jobs Macro For Loop
237240

238-
## 4.6 -Display All Jobs
241+
@pytest.mark.show-jobs-macro-for-loop Still in `_macros.html` and in the body of the `show_jobs` macro add the following HTML:
242+
- Add a `<div>` with two classes `columns` and `is-multiline`.
243+
- In this `<div>` add a `for in` loop that loops through all jobs. **Note: Use the `{% %}` template syntax, don’t forget about ending the `for` loop.**
239244

240-
@pytest.mark.display-all-jobs Open the file `templates/index.html` above the `{% endblock %}` add a `<div>` with two classes `columns` and `is-multiline`. In the div add a `for in` loop that loops through all jobs. Use the `{% %}` template syntax, don’t forget about ending the `for` loop. In the `for` loop add a `<div>` with two classes `column` and `is-half`. Too this `<div>` add the following template code:
245+
## 4.8 - Show Jobs Macro For Loop Body
241246

247+
@pytest.mark.show-jobs-macro-for-loop-body In the body of the `for` loop add a `<div>` with two classes `column` and `is-half`.
248+
- In this `column` `<div>` add a call to the `show_job` macro passing in a individual `job` from the `for` loop.
249+
250+
## 4.9 - Import Macros
251+
252+
@pytest.mark.import-macros In `templates/layouts.html` import the `show_job`, and `show_jobs` macros using the following code:
242253
```
243-
{% with job=job %}
244-
{% include "_job.html" %}
245-
{% endwith %}
246-
```
254+
{% from '_macros.html' import show_job, show_jobs with context %}
255+
```
256+
**Notes: Because each template extends `layouts.html` all of them will have access to these two new macros.**
247257

248-
## 4.7 - Display Individual Job Details
258+
## 4.10 - Import Macros
249259

250-
@pytest.mark.display-individual-job-details In `templates/job.html` add a template block called `content` using the `{% %}` template markup. In the template block add the following template code:
260+
@pytest.mark.import-macros Copy the HTML structure of the `index.html` from `templates.html`. Paste in the new block replacing the existing `content` block.
251261

252-
```
253-
{% with job=job %}
254-
{% include "_job.html" %}
255-
{% endwith %}
256-
```
262+
## 4.11 - Display All Jobs
257263

258-
## 4.8 - Display Individual Employer Details
264+
@pytest.mark.display-all-jobs In the `index.html` template above the `{% endblock %}` add a call to the `show_jobs` macro passing in the argument `jobs`.
259265

260-
@pytest.mark.display-individual-employer-details Open `templates/employer.html` as the first thing in the template block add the following HTML:
266+
## 4.12 - Gather All Jobs
261267

262-
- `<div>`
263-
- Nested in the `<div>` add an `<h1>` with the content {{ employer['name'] }}
264-
- Nested in the `<div>` add a`<div>` with a class of `description`
265-
- Nested in the description `<div>`add a`<p>` with the content {{ employer['description'] }}
266-
267-
## 4.9 -Display All Employer Jobs
268+
@pytest.mark.gather-all-jobs In `app.py` locate the `jobs` function.
268269

269-
@pytest.mark.display-all-employer-jobs Open the file `templates/employer.html` below the jobs `<h2>` add a `<div>` with two classes `columns` and `is-multiline`. In the div add a `for in` loop that loops through all jobs. Use the `{% %}` template syntax, don’t forget about ending the `for` loop. In the `for` loop add a `<div>` with two classes `column` and `is-half`. To the `<div>` add the following template code:
270+
Above the `render_template` function, call the `query_db` function:
271+
- Pass in the SQL statement: `'SELECT job.id, job.title, job.description, job.salary, employer.id as employer_id, employer.name as employer_name FROM job JOIN employer ON employer.id = job.employer_id'`.
272+
- Assign the results of the call to a variable called `jobs`.
273+
- In the `render_template` function, pass a keyword argument of `jobs=jobs`.
270274

271-
```
272-
{% with job=job %}
273-
{% include "_job.html" %}
274-
{% endwith %}
275-
```
275+
**Preview**
276+
277+
At this point you can see all jobs on the homepage:
276278

277-
# Module 05 - Employer Reviews
279+
- Open a terminal at the root of the project
280+
- Run the command `flask run`.
281+
- Open a browser and navigate to the URL: `http://localhost:5000`.
278282

279-
## 5.1 - Review Route
283+
**Note: Appending `/jobs` should display the same page.**
280284

281-
@pytest.mark.app-review-route In `app.py` below the `employer` function create a new function called review. Add `employer_id` to the parameter list. Add a route decorator will a URL pattern of `/employer/<employer_id>/review` as well as a keyword argument `methods` set to a tuple with two values: 'GET' and 'POST'.
282-
In the body of the function return the render_template function passing in `review.html` template and a keyword argument of `employer_id=employer_id`.
285+
# Module 05 - Display Individual Jobs
283286

284-
## 5.2 - Check for POST method
287+
## 5.1 - Job Template
285288

286-
@pytest.mark.app-review-check-for-post-method In the body of the `review` above the render_template function call, create an `if` statement that checks if the request method is 'POST'. In the `if` statement create four variables `review`, `rating`, `title`, and `status`. Set them equal to their respective `request.form` values i.e. `request.form['review']`. Create two more variables `error` (set to `None`) and `date` (set to `datetime.datetime.now().strftime("%m/%d/%Y")`) . For `datetime` add an `import datetime` statement to the top of `app.py`.
289+
@pytest.mark.app-job-route We need a template to display an individual job. Create a new file called `job.html` in the `template` folder.
287290

288-
## 5.3 - Check for Values
291+
In the file use an `extends` template tag to inherit `layout.html`.
289292

290-
@pytest.mark.app-review-check-for-values In the body of the post `if` statement in the review function in `app.py`, below the variables check if there is a value for `review`, `rating`, and `title`. If any of these are empty set `error` to an appropriate error message i.e. 'Review field is required.'
293+
After the `extends` tag add a call to the `show_job` macro passing in `job`. **Note: Use the `{{}}` for the macro call.**
294+
295+
## 5.2 - Job Route Function
291296

292-
## 5.4 - Check for Error
297+
@pytest.mark.app-job-route-function In `app.py` create a function called `job`. In the body return a call to the `render_template` function passing in the newly created `job.html` template.
293298

294-
@pytest.mark.app-review-check-for-error Still in the review function below the value checks add an `if` statement that checks if `error` is `None`. If there are no errors we are going to add the form values to the database. To do this we need to connect to the database and commit some changes. Follow these steps:
295-
- Set a `db` variable to a call to `get_db()`
296-
- `execute` the following SQL statement: `'INSERT INTO review (review, rating, title, date, status, employer_id) VALUES (?, ?, ?, ?, ?, ?)'` passing the values: `(review, rating, title, date, status, employer_id)`
297-
- `commit` the changes to the database.
298-
- return a redirect taking the user back to the employer page. **Hint: use `redirect()` and `url_for()` (pass keyword argument of `employer_id=employer_id`) both of which need to be imported from flask.**
299+
## 5.3 - Job Route Decorator
299300

300-
If there are errors (`else` statement) `flash` the error. **Hint: `else` statement; use `flash()` (imported from flask)**
301+
@pytest.mark.app-job-route-decorator We only need one job from the database, we will use the `query_db` function passing in a query with a where clause. In the where clause we will need a `job_id`. We are going to get this from the URL.
301302

302-
## 5.5 - Review Form Cancel
303+
Still in `app.py`, add a route decorator with the URL path `/job/<job_id>` to the `job` function.
303304

304-
@pytest.mark.review-form-cancel Open `templates/review.html` and find the cancel anchor tag. Add an `href` attribute with a value of `{{ url_for('employer', employer_id=employer_id) }}`.
305+
## 5.4 - Job Route Parameter
305306

306-
## 5.6 - Individual Employer Reviews
307+
@pytest.mark.app-job-route-parameter. To use the `job_id`, received from the URL, we need to pass it to the `job` function. Add `job_id` to the parameter list of the `job` function.
307308

308-
@pytest.mark.app-individual-employer-reviews Now that employer reviews can be created, let’s display them on the individual employer pages. Switch back to `app.py` and find the `employer` function below the jobs query add a new query to get all review for the employer. Make a call to `query_db` and assign the return value to `reviews`. Pass in the arguments:
309-
- SQL Query: 'SELECT review, rating, title, date, status FROM review JOIN employer ON employer.id = review.employer_id WHERE employer.id = ?'
310-
- List Literal: [employer_id]
309+
## 5.5 - Job Route Data
311310

312-
In the `render_template` function, add another keyword argument of `reviews=reviews`
311+
@pytest.mark.app-job-route-data In the `job` function, above the `render_template` function, call the `query_db` function and assign the results of the call to a `job` variable.
312+
Pass these three arguments to `query_db`:
313+
- SQL Query: `'SELECT job.id, job.title, job.description, job.salary, employer.id as employer_id, employer.name as employer_name FROM job JOIN employer ON employer.id = job.employer_id WHERE job.id = ?'`
314+
- List Literal: [job_id]
315+
- True: This will bring back only one result.
316+
317+
## 5.6 - Job Route Pass Data
318+
319+
@pytest.mark.app-job-route-pass-data The template needs access to the job data. Let's pass the newly created variable `job` to the `render_template` function. This is done using the keyword argument syntax `job=job`.
320+
321+
**Preview**
322+
323+
At this point you can see an individual job:
324+
325+
- Open a terminal at the root of the project
326+
- Run the command `flask run`.
327+
- Open a browser and navigate to the URL: `http://localhost:5000/job/1`.
328+
329+
# Module 06 - Display Individual Employers
330+
331+
## 6.1 - Employer Template
332+
333+
@pytest.mark.employer-template To display an employer create a new file called `employer.html` in the `templates` folder. Open `templates.html`, find the appropriate block of HTML and copy and paste it to `employer.html`.
313334

314-
## 5.7 - Display Individual Employer Reviews
335+
To the top of the file inherit from the `layout.html` template by using an `extends` template tag.
336+
337+
## 6.2 - Employer Template Details
338+
339+
@pytest.mark.employer-template-details Still in `employer.html` as the first thing in the template block add the following HTML:
340+
341+
- `<div>`
342+
- Nested in the `<div>` add an `<h1>` with the content {{ employer['name'] }}
343+
- Nested in the `<div>` add a `<div>` with a class of `description`
344+
- Nested in the description `<div>` add a`<p>` with the content {{ employer['description'] }}
345+
346+
## 6.3 - Employer Template All Jobs
347+
348+
@pytest.mark.employer-template-all-jobs Below the `<h2>` Jobs header in `employer.html` add a call to the `show_jobs` macro passing in `jobs`.
349+
350+
## 6.4 - Employer Template Reviews
351+
352+
@pytest.mark.employer-template-reviews Open `employer.html` and find the review `<h2>`, remove the comment surrounding the empty `{% %}` template tag. To this tag add a `for in` loop to loop through all `reviews`. Add the `endfor` directive to the second empty `{% %}` template tag, don't forget to the remove the comment.
353+
354+
## 6.5 - Employer Template Review Stars
355+
356+
@pytest.mark.employer-template-reviews Still `employer.html` in the `<div>` with a class of `media-left` add this for loop:
315357

316-
@pytest.mark.display-individual-employer-reviews Open `templates/employer.html` find the review `<h2>` in the empty `{% %}` template tag add a `for in` loop to loop through all `reviews`. Add the `endfor` directive to the second empty `{% %}` template tag. In the `<div>` with a class of `media-left` add this for loop:
317358
```
318359
{% for _ in range(1, review['rating']): %}
319360
<span class="fa fa-star checked"></span>
320361
{% endfor %}
321362
```
322-
In the `content <div>` add a paragraph tag. In the paragraph display the details of a review:
323-
- `title`
324-
- `status`
325-
- `date`
363+
364+
## 6.6 - Employer Template Review Details
365+
366+
@pytest.mark.employer-template-review-details Still in `employer.html` in the `content <div>` add a paragraph tag. In the paragraph display the details of a review:
367+
- `title` (Recommend Style: `<strong>`)
368+
- `status`(Recommend Style: `<small>`)
369+
- `date` (Recommend Style: `<small>`)
326370
- `review`
327371

328-
For the `Create Review` button to work, add an `href` that points to the individual employer page.
372+
## 6.7 - Employer Route
373+
374+
@pytest.mark.app-employer-route The template we have just built needs access to employer, job, and review data. Let's create a new function in `app.py` called `employer`.
375+
376+
Add a route decorator with a URL pattern of `/employer/<employer_id>`.
377+
378+
In the body return a call to the `render_template` function passing in the `employer.html` template.
379+
380+
## 6.8 - Employer Route Employer Details
381+
382+
@pytest.mark.app-employer-route-employer-details Still working with the `employer` function add `employer_id` to the parameter list so that we have access to this value. Above the `render_template` function make a call to `query_db` and assign the return value to `employer`.
383+
384+
Pass the following arguments to `query_db`:
385+
- SQL Query: 'SELECT * FROM employer WHERE id=?'
386+
- List Literal: [employer_id]
387+
- True: This will bring back only one result.
388+
389+
In the `render_template` function, pass a keyword argument of `employer=employer`.
390+
391+
## 6.9 - Employer Route Employer Jobs
392+
393+
@pytest.mark.app-employer-route-employer-jobs On the employer details page, we want to display all of the employers' jobs. In the `employer` function in `app.py` below the `employer` variable, add a call to the `query_db` function and assign the results to a variable called `jobs`. Pass the function two arguments:
394+
- SQL Query: `'SELECT job.id, job.title, job.description, job.salary FROM job JOIN employer ON employer.id = job.employer_id WHERE employer.id = ?'`
395+
- List Literal: [employer_id]
396+
397+
In the `render_template` function, add another keyword argument of `jobs=jobs`
398+
399+
## 6.10 - Employer Route Employer Review
400+
401+
@pytest.mark.app-employer-route-employer-reviews Still in the `employer` function in `app.py` below the jobs query add a new query to get all review for the employer. Make a call to `query_db` and assign the return value to `reviews`. Pass in the arguments:
402+
- SQL Query: 'SELECT review, rating, title, date, status FROM review JOIN employer ON employer.id = review.employer_id WHERE employer.id = ?'
403+
- List Literal: [employer_id]
404+
405+
In the `render_template` function, add another keyword argument of `reviews=reviews`
406+
407+
**Preview**
408+
409+
At this point you can see an individual employer:
329410

330-
# Module 06 - Add Jobs
411+
- Open a terminal at the root of the project
412+
- Run the command `flask run`.
413+
- Open a browser and navigate to the URL: `http://localhost:5000/employer/1`.
331414

332-
## 6.1 - Admin Route
415+
# Module 07 - Employer Reviews
333416

334-
@pytest.mark.app-admin-route We will display all jobs on the admin page. To start, in `app.py` create a basic route that displays the contents of the admin index template. Create a function called `admin` and attach a `route()` decorator with the URL of `/admin`. In the body of the function use the `query_db` function to get all jobs from the database. The SQL can be found in other routes. Next, return a call to the `render_template()` passing in the `admin/index.html` template and the correct keyword arguments.
417+
## 7.1 - Review Route
335418

336-
## 6.2 - Admin Create Job Route
419+
@pytest.mark.app-review-route In `app.py` below the `employer` function create a new function called `review`. Add `employer_id` to the parameter list.
337420

338-
@pytest.mark.app-admin-create-job-route In `app.py` create a route at the path `/admin/create` that accepts the methods 'GET' and 'POST'.
421+
Add a route decorator with a URL pattern of `/employer/<employer_id>/review`. Also add a keyword argument `methods` set to a tuple with two values: `'GET'` and `'POST'`.
339422

340-
## 6.3 - Check for POST method
423+
In the body of the function return the `render_template` function passing in the `review.html` template and a keyword argument of `employer_id=employer_id`.
341424

342-
@pytest.mark.app-admin-check-for-post-method In the body of your route check if data has been posted then create four variables `title`, `description`, `salary`, and `employer_id`. Set them equal to their respective `request.form` values. Create an `error` variable set to `None`.
425+
## 7.2 - POST Request Check
343426

344-
## 6.3 - Check for Values
427+
@pytest.mark.app-review-post-request-check In the body of the `review` above the render_template function call, create an `if` statement that checks if `request.method` is `'POST'`.
345428

346-
@pytest.mark.app-admin-check-for-values In the body of the post `if` statement in your route function in `app.py`, below the variables, check if there is a value for `title`, and `employer_id`. If either is empty set `error` to an appropriate error message i.e. 'Title field is required.'
429+
- In the `if` statement create four variables `review`, `rating`, `title`, and `status`. Set them equal to their respective `request.form` values i.e. `request.form['review']`.
430+
- Create a `date` variable assign it todays date formatted like '08/10/2018` **Hint: Use `now()` and `strftime("%m/%d/%Y")`. If you use `now()` add an `import datetime` statement to the top of `app.py`.**
347431

348-
## 6.4 - Check for Error
432+
## 7.3 - Insert Review
349433

350-
@pytest.mark.app-admin-check-for-error Still in your route function below the value checks add an `if` statement that checks if `error` is `None`. If there are no errors we are going to add the form values to the database. Connect to the database and commit the changes.
351-
**Hint: The SQL is `'INSERT INTO job (title, description, salary, employer_id) VALUES (?, ?, ?, ?)'`**
434+
@pytest.mark.app-review-insert-review Still in the `review` function below the variables in the `if` statement connect to the database, insert the form values, and commit the changes. Follow these steps:
435+
- [] Assign a `db` variable to a call to `get_db()`
436+
- [] `execute` the following SQL statement: `'INSERT INTO review (review, rating, title, date, status, employer_id) VALUES (?, ?, ?, ?, ?, ?)'` passing the values: `(review, rating, title, date, status, employer_id)`
437+
- [] `commit` the changes to the database.
438+
- [] return a redirect taking the user back to the employer page. **Hint: use `redirect()` and `url_for()` (pass a keyword argument of `employer_id=employer_id`) both of which need to be imported from flask.**
352439

353-
If there are errors `flash` the error. **Hint: `else` statement**
440+
## 7.4 - Review Form Cancel
354441

355-
## 6.5 - Admin Navigation
442+
@pytest.mark.review-form-cancel Open `review.html` and find the cancel anchor tag. Add an `href` attribute with a value of `{{ url_for('employer', employer_id=employer_id) }}`.
356443

357-
@pytest.mark.admin-navigation Find the admin index template and add an href attribute to the `New Job` link. Send the user to the URL ``/admin/create`. Open create job template and find the cancel anchor tag. Point the link back to the admin page using `url_for()`.

‎templates.html

+20-96
Original file line numberDiff line numberDiff line change
@@ -3,58 +3,62 @@
33
<html>
44
<head>
55
<title>Job Board</title>
6-
7-
8-
96
</head>
107
<body>
11-
128
<div class="container top">
139
<div class="content">
1410
{% block content %}
1511
{% endblock %}
1612
</div>
1713
</div>
18-
1914
</body>
2015
</html>
2116

17+
<!-- templates/_marcos.html -->
18+
<!-- show_job -->
19+
<div class="card adjust-height">
20+
<header class="card-header">
21+
<p class="card-header-title">
22+
</p>
23+
</header>
24+
<div class="card-content">
25+
<div class="content">
26+
</div>
27+
</div>
28+
</div>
29+
2230
<!-- templates/index.html -->
2331
{% block content %}
2432
<div class="columns">
2533
<div class="column">
2634
<h1>Jobs</h1>
2735
</div>
2836
<div class="column is-one-fifth">
29-
3037
</div>
31-
32-
3338
</div>
3439
{% endblock %}
3540

3641
<!-- templates/employer.html -->
3742
{% block content %}
3843
<h2>Jobs</h2>
3944

40-
4145
<h2>Reviews</h2>
42-
{% %}
46+
{# TODO: Remove comment and add for loop
47+
{% %}
48+
#}
4349
<div class="box">
4450
<article class="media">
4551
<div class="media-left">
46-
47-
4852
</div>
4953
<div class="media-content">
5054
<div class="content">
51-
52-
5355
</div>
5456
</div>
5557
</article>
5658
</div>
57-
{% %}
59+
{# TODO: Remove comment and end for loop
60+
{% %}
61+
#}
5862
<div class="columns">
5963
<div class="column">
6064
<a class="button is-info is-pulled-right">Create Review</a>
@@ -72,7 +76,6 @@ <h1>New Review</h1>
7276
<input class="input" type="text" name="title" id="title" required>
7377
</div>
7478
</div>
75-
7679
<div class="field">
7780
<label class="label">Rating</label>
7881
<div class="control">
@@ -87,14 +90,12 @@ <h1>New Review</h1>
8790
</div>
8891
</div>
8992
</div>
90-
9193
<div class="field">
9294
<label class="label">Review</label>
9395
<div class="control">
94-
<textarea class="textarea" name="review" id="review"></textarea>
96+
<textarea class="textarea" name="review" id="review" required></textarea>
9597
</div>
9698
</div>
97-
9899
<div class="field">
99100
<label class="label">Employment Status</label>
100101
<div class="control">
@@ -106,83 +107,6 @@ <h1>New Review</h1>
106107
</div>
107108
</div>
108109
</div>
109-
110-
<div class="field is-grouped">
111-
<div class="control">
112-
<button class="button is-link">Submit</button>
113-
</div>
114-
<div class="control">
115-
<a class="button is-text">Cancel</a>
116-
</div>
117-
</div>
118-
</form>
119-
{% endblock %}
120-
121-
<!-- templates/_job.html -->
122-
<div class="card adjust-height">
123-
<header class="card-header">
124-
<p class="card-header-title">
125-
126-
127-
</p>
128-
</header>
129-
<div class="card-content">
130-
<div class="content">
131-
132-
133-
</div>
134-
</div>
135-
</div>
136-
137-
<!-- templates/admin/index.html -->
138-
{% block content %}
139-
<div class="columns">
140-
<div class="column">
141-
<h1>Jobs</h1>
142-
</div>
143-
<div class="column is-one-fifth">
144-
<a class="button is-info is-pulled-right">New Job</a>
145-
</div>
146-
</div>
147-
{% endblock %}
148-
149-
<!-- templates/admin/create.html -->
150-
{% block content %}
151-
<h1>New Job</h1>
152-
<form method="post">
153-
<div class="field">
154-
<label class="label">Title</label>
155-
<div class="control">
156-
<input class="input" type="text" name="title" id="title" required>
157-
</div>
158-
</div>
159-
160-
<div class="field">
161-
<label class="label">Salary</label>
162-
<div class="control">
163-
<input class="input" type="text" name="salary" id="salary" required>
164-
</div>
165-
</div>
166-
167-
<div class="field">
168-
<label class="label">Employer</label>
169-
<div class="control">
170-
<div class="select">
171-
<select name="employer_id" id="employer_id">
172-
173-
174-
</select>
175-
</div>
176-
</div>
177-
</div>
178-
179-
<div class="field">
180-
<label class="label">Description</label>
181-
<div class="control">
182-
<textarea class="textarea" name="description" id="description"></textarea>
183-
</div>
184-
</div>
185-
186110
<div class="field is-grouped">
187111
<div class="control">
188112
<button class="button is-link">Submit</button>

0 commit comments

Comments
 (0)
Please sign in to comment.