CRUD assignment

CRUD assignment

1. assignment

   • You must be able to CREATE, READ, UPDATE and DELETE records from your database
     • -Have 1 CREATE button -Records are displayed in a table -Have 1 UPDATE button -Have 1 DELETE button
   • Your results must be displayed in a Flask Web Application
     • -Records in VIEW page matches with records in database -VIEW page displays all records -Updated records are displayed on VIEW page -Results are present in database
   • You must have a minimum of 5 records in your CRUD application
     • 5 records are visible on the VIEW page Python includes code to create records Records are unique Have capacity to store more than 5 records
   • You must apply CSS styling to your CRUD application that aligns with your user persona’s requirements o E.g. A font or background colour
     • HTML include 1 <p> selector Include 1 image Use a readable font Text colours are clear
   • Web app is appealing and can be easily navigated by user
     • Web page has clear title page name Web page includes images relating to roblox Web page includes instruction on how to create record Texts are easy to read

2. CRUD

   • C- Create Involves adding new data/records to a databases. Example: adding a new post on instagram
   • R- Read, retrieves data from a database and displays it. Example: viewing a blog post on instagram
   • stands for create, read, update, and delete, which are four basic operations for managing persistent data in applications.
   • U-updates involves modifying existing data records. Usually includes pre-filled forms to allow users to edit information. Example: Updating user account details or editing a blog post.
   • D- delete Refers to removing data or records from a database. Often includes confirmation prompts to prevent accidental deletion. Example: Deleting a user account or removing comments from a post.

3. back end

   • Database
     • SQLite3
       • SQLite3 is a lightweight, serverless, self-contained SQL database engine that's widely used for applications that require a simple and efficient way to manage data.
         • does not require a separate server process. It operates directly on disk files, making it easy to set up and use.
       • CREATE TABLE records ( id INTEGER PRIMARY KEY AUTOINCREMENT, name TEXT NOT NULL, email TEXT NOT NULL );
   • Python
     • Flask
       • lightweight and flexible micro-framework that is easy to set up and use. Ideal for small to medium-sized applications.
     • Handles http requests from user. Define routes that map to specific functions or views in the application
     • connects to database
     • @app.route("/create", methods=["GET", "POST"]) def create(): if request.method == "POST": name = request.form["name"] email = request.form["email"] conn = sqlite3.connect("database.db") cursor = conn.cursor() cursor.execute("INSERT INTO records (name, email) VALUES (?, ?)", (name, email)) conn.commit() conn.close() flash("Record created successfully") return redirect(url_for("read")) else: return render_template("create.html")

4. changes made

   • HTML
     • Add images <img>
     • add text <p>
       • add instructions to improve accessability
     • - Add instructions on each page - Remove @ requirement (change type to text) - Make number button (change type to number)
   • CSS
     • - Change style of text into a clear font and color - Change style of images (margins and width) -

5. Front end (UI)

   • html- provides basic structure of webpage- organise content using elements
     • <p><a href="{{ url_for('read') }}">Read records</a></p> <p><a href="{{ url_for('create') }}">Create record</a></p> <br> <img src="link for image" alt="yeye">
     • Forms: Important for create and update function
   • CSS- works with html to make the visual presentation of a webpage
     • h1{ font-family: Verdana, sans-serif; background-color: rgba(255, 255, 255, 0.8);/ color: black; padding: 36px 10px; margin: 4px 0; border-radius: 10px;