Web Dev Bootcamp TIL Day-4

Learning to organize folders in an orderly fashion when starting a project is a crucial skill as it reduces the time one needs to spend when reaccessing a file. Thankfully a felllow team member was able to show our team an effective way of organizing directory folders. The basic structure of file organization for flask frameworks seems to be the following:

 

(Separate css and js for for respective htmls)

<link href="{{ url_for('static', filename='style_personal.css') }}" rel="stylesheet" />
<script src="{{ url_for('static', filename='script_personal.js') }}"></script>

• Streamline organization by creating distinct css and js files for different html files.
• In the above example, we are applying style and functions that will be used in team member's personal intro site.

 

@app.route('/')
def home():
    return render_template('index.html')

@app.route('/getPerson1')
def getpeople1():
    return render_template('personal_test_1.html')

@app.route('/gittin') 
def gittin(): return redirect("https://github.com/kti0940")

<a href="/gittin">
    <button class="w-btn" type="button"><img src="../static/images/git_image.png" width="50px" height="50px" /></button>
</a>

• Flask's route and redirect feature: simplifies the anchoring of hrefs
• in the above example, we are applying the href for a team member's github page inside a button's anchor tag

 

POST/GET Feature for Comment:

 

POST

1. frontend input(client inputs data of some sort)

2. submit button

3. --calls function---> client(ajax jQuery call) inside JS function

4. --data---> app.py server(flask) POST method 

5. --data---> mongoDB

 

GET

mongoDB

--data---> app.py server(flask) GET method

--data---> function that dissects data stored in response with key: value pairing and formats into temp_html table data

--temp_html---> appends frontend to designated table area

 

 

 

 

 

 

Today was an overwhelming day as there was pressure to meet a deadline by the end of the day. I failed to implement the majority of the features disccused in our wireframe as I got caught up in small details. I think I need to focus on first implementing layouts/bigger picture before focusing on smaller implementations.