Transactional Web Applications ## Requirements 1. To be done individually. 2. You can use online resources, including class recordings, Google, ... to help you complete this exam. 3. You cannot get help from another person, whether this person is a student in the class or not, except the teacher. 4. Don't include the `venv` folder in your submission. Don't include the external librairies or other external files. Include only your folders and files (`.py`, `.html`, `.css`, `.md`, ...). 5. Make sure your follow the requested names for your folders, files, routes and functions. Errors in names could result in a penalty. ## Part A: Flask project and base template 1. Create a Flask project named `exam_1234567`, in which you replace `1234567` by your student number. All your files and folders should be in this project folder. 2. In the `README.md` file, write your name and your student number. 3. Create a base template named `base.html`. It should contain these elements: 1. The page title should contain your name and student number. 2. At the beginning of the body, there should be a `div` containing a `h1` containing the string `Exam -- Transactional Web Applications`. 3. It should be followed by a contents block, containing an image related to Vanier College. The image should **NOT** be stored locally, it should be an image stored remotely. 4. At the end there should be a `footer` or `div` containing your name and your student number, along with your Vanier email address. 5. There's no need to make a `navbar` or a menu in this page. There's no need for fancy CSS here, only the CSS required below. 4. Create a simple `exam.css` file, which will change the background color of your footer. This CSS file should be located in the proper folder, and included properly in your base template. 5. In your `app.py`, the `/` route should render the base template. ## Part B: Question model 1. Create a DB model, using SQL Alchemy, to represent a question. It will represent questions asked by the users of the website. It should contain the following columns: 1. `d`: the primary key 2. `datetime`: containing the current date and time by default 3. `email`: the user's email address 4. `title`: the question's title 5. `category`: a text column, to contain one of the following values - Database - Programming - Security - Other 6. `question`: the actual question (of type text) 2. Set up the database according to this model. The database should be stored in the file `questions.sqlite` ## Part C: Questions routes To test these 2 routes, you can manually add questions in the question table. Part D will be about creating a form to post questions, but you don't need part D to test this part. Alternatively, you could do part D before this part if you prefer. 1. Route `/questions/`: 1. Route to display all the columns of a specific question with the given `id`. 2. The template used to display the question should extend the base template and display the question in the contents block. 3. The exact layout is up to you, as long as all the columns are displayed. Keep it simple, there are no extra points for making it pretty. 2. Route `/questions`: 1. Route to display all the questions in an HTML table or list. 2. The template used to display all the questions should extend the base template and display the questions in the contents block. 3. Get all the questions from the database, sorted by the `datetime` column, the newest questions first. 4. Only display the title and the category. The category should a link to the full question. 5. Add a link in the base template to this new route. This link should be in the `div` at the beginning of the document. ## Part D: FlaskForm 1. Create a Flask form to let users post a question. It should contain the following fields: 1. `email`: the user's email address 2. `title`: the question's title 3. `category`: a drop-down menu, with the following values: - Database - Programming - Security - Other 4. `question`: the actual question (a text area) 2. Route `/new-question`: 1. `GET/POST` route to display and process the form. 2. The template used to display the form should extend the base template and display the form in the contents block. 3. Add a link in the base template to this new route. This link should be in the `div` at the beginning of the document. 4. If the form data validates, it should add the question in the database. 5. After a successful submission, it should redirect to `/questions`. ## Submission: no later than 17:00, Friday, January 27 Zip your project folder, and submit it on Omnivox. It should not include any `venv` folder, but it should include your SQLite database.