Create a Link Manager Using Flask and Python as a Backend
Image by Author |
Hello Everyone...👋 Today we will create a web application that will save all your necessary and important website URLs and other links in one place and you can reach that website by clicking on a button.
Now you may ask what is the requirement of this type of web application?
Answer:
- There are many websites or specific blogs that we have it visit very rarely. In time we may lose the link(URL) or name of that website or we may forget it. If you write the link of this website or blog in one place the you can easily reach that website or blog.
- There are also many website or blogs that do not show up directly in the search results. To reduce the hassle of repeatedly searching for such website or blogs, you can save the url or links of such websites in one place and visit the website from there.
- You can also view this web application as a python project. This will be the practice of your python. This project could be easily created using python where we would create a file and write to that file with input from the user. But it would be a beginner level project. We will use Flask to do an intermediate level project using python as a backend.
Python Docs: Visit
Flask Docs: Visit
Jinja Docs: Visit
SQLAlchemy Docs: Visit
SQLite Viewer: Visit
Start to Create
Step 1:
First of all we will create an empty folder on any drive of our computer where we want to keep this program.
Image by Author |
Step 2:
Now we will open vscode inside this empty folder. After opening vscode, I will open the terminal and run these commands-
Image by Author |
Step 3:
Now create two folders inside the linker folder. one is statis and second is templates.
Image by Author |
Step 4:
Now we will download templates from www.start bootstrap.com which we will use our web application.
Image by Author |
Step 5:
Now extract the downloaded file. After extracted open it. Now you will see three folder(assets, css, js) 📂 and an HTML file📁(index.html) here. Now assets, css, js these three folders have to be pasted inside the static folder and index.html has to be pasted into the templates folder.
Image by Author |
Step 6:
Create five more files(404.html, error.html, about.html, contact.html, base.html) inside the templates folder.
- base.html Code(new file): Visit
- index.html(edit the bootstrap index.html) Code: Visit
- contact.html Code(new file): Visit
- about.html Code(new file): Visit
- error.html Code(new file): Visit
- 404.html Code(new file): Visit
Step 7:
Create two more files(404.css, error.css) inside the /static/css folder.
Create app.py file inside the linker folder.
- app.py code: Visit
Step 9:
Create db file. Open the vscode terminal and run this commands.
> .\env\Scripts\activate
> python
> from app import db
> db.create_all()
Step 10:
Now see the File structure.
Image by Author |
Link Icon:
Image by Author |
Step 11:
Now finally run this program using command,
> .\env\Scripts\activate
> python ./app.py
Click(ctrl + mouse click) the output link.
If you get an error while running this program, do not hesitate to comment. Thanks for read this blog hope your program is work correctly. For read more this type blogs follow RajTech99 only Technology.