Edulab-student-portal

full stack CRUD web application built with HTML, CSS, Bootstrap, JavaScript, Python, Postgres, and Flask framework.

Table of contents

• Overview
  • The challenge
  • Screenshot
  • Links
• My process
  • Built with
  • What I learned
  • Useful resources
• To use

Overview

The challenge

Users should be able to:

• Add a new student.
• View each student's details.
• Delete a student data.
• View the optimal layout for the site depending on their device's screen size

Screenshot

Links

• Solution URL: (https://github.com/faozziyyah/Edulab-student-portal)
• Live link: (https://edulab-student-portal.herokuapp.com/)

My process

Built with

• HTML
• CSS
• Bootstrap
• Javascript
• Ajax
• Flask - A web development microframework built with python
• Postgres

What I learned

• How to connect to a database
• How to use the Jinja template

$( window ).on("load", function() {
    $("#myModal").modal("show");
    $("#content").hide();
    $(".update-content").hide();
    $(".edit-word, .edit-meaning").hide();
    $(".submit, .cancel").hide();
}

@app.route('/delete/<string:id_data>', methods =['GET'])
def delete(id_data):
    flash('student record deleted successfully')
    conn = get_db_connection()
    cur = conn.cursor()
    cur.execute(' delete from students where student_id=%s', (id_data))
    conn.commit()
    return redirect(url_for('students'))

{% for student in students %}
<tr>
    <td>{{ student['student_id'] }}</td>
    <td class="word-word">{{ student['firstname'] }} {{ student['lastname'] }}</td>
    <td class="word-meaning">{{ student['gender'] }}</td>
    <td class="word-meaning">{{ student['jambscore'] }}</td>
    <td class="word-meaning">{{ student['email'] }}</td>
</tr>

Useful resources

• Flask - A web development microframework built with python <<<<<<< HEAD
• Postgresql - The world's most popular open source database =======
• MySQL - The world's most popular open source database

8a9870f67ee869db39a066d9324ea5c44c0a0b47