app.py<\/code> in your favorite text editor.<\/li>\n<\/ol>\nIn app.py<\/code>, we will import Flask and create our Flask application.<\/p>\nfrom flask import Flask\n\napp = Flask(__name__)\n\n@app.route('\/')\ndef hello():\n return 'Hello, Flask!'\n<\/code><\/pre>\nIn this code, we import the Flask<\/code> class and create an instance of it called app<\/code>. We then use the @app.route()<\/code> decorator to define a route for the root URL (“\/”). When a user visits the root URL, the hello()<\/code> function will be called and it will return the string ‘Hello, Flask!’.<\/p>\nStep 4: Run the Flask Application<\/h2>\n
Now that we have our Flask application set up, let’s run it and see the results!<\/p>\n
\n- Make sure you are still in the project directory.<\/li>\n
- Start the Flask development server:
flask run<\/code>.<\/li>\n<\/ol>\nYou should see output similar to the following:<\/p>\n
* Running on http:\/\/127.0.0.1:5000\/ (Press CTRL+C to quit)\n<\/code><\/pre>\nOpen your web browser and visit `http:\/\/127.0.0.1:5000\/`. You should see the message ‘Hello, Flask!’ displayed on the page.<\/p>\n
Congratulations! You have created a basic Flask web application.<\/p>\n
Step 5: Routing and Templates<\/h2>\n
In the previous step, we defined a single route for the root URL. Let’s add more routes and use templates to render dynamic content.<\/p>\n
\n- Update
app.py<\/code> with the following code:<\/li>\n<\/ol>\nfrom flask import Flask, render_template\n\napp = Flask(__name__)\n\n@app.route('\/')\ndef home():\n return render_template('index.html')\n\n@app.route('\/about')\ndef about():\n return render_template('about.html')\n<\/code><\/pre>\n\n- Create a new directory called
templates<\/code> in your project directory.<\/li>\n- Inside the
templates<\/code> directory, create two files: index.html<\/code> and about.html<\/code>.<\/li>\n<\/ol>\nIn index.html<\/code>, add the following code:<\/p>\n<!DOCTYPE html>\n<html>\n<head>\n <title>Home<\/title>\n<\/head>\n<body>\n <h1>Welcome to the Home Page!<\/h1>\n <p>Feel free to explore the website.<\/p>\n<\/body>\n<\/html>\n<\/code><\/pre>\nIn about.html<\/code>, add the following code:<\/p>\n<!DOCTYPE html>\n<html>\n<head>\n <title>About<\/title>\n<\/head>\n<body>\n <h1>About Us<\/h1>\n <p>We are a team of developers passionate about Flask!<\/p>\n<\/body>\n<\/html>\n<\/code><\/pre>\nNow, if you start the Flask development server again and visit http:\/\/127.0.0.1:5000\/`, you will see the content from<\/code>index.html. If you visit<\/code>http:\/\/127.0.0.1:5000\/about`, you will see the content from about.html<\/code>.<\/p>\nFlask uses the Jinja templating engine to render HTML templates. By using templates, we can separate our application logic from the presentation layer and create reusable components.<\/p>\n
Step 6: Handling Form Data<\/h2>\n
To make our web application more interactive, let’s handle form data.<\/p>\n
\n- Update
app.py<\/code> with the following code:<\/li>\n<\/ol>\nfrom flask import Flask, render_template, request\n\napp = Flask(__name__)\n\n@app.route('\/')\ndef home():\n return render_template('index.html')\n\n@app.route('\/contact', methods=['GET', 'POST'])\ndef contact():\n if request.method == 'POST':\n name = request.form.get('name')\n email = request.form.get('email')\n message = request.form.get('message')\n\n # Process the form data (e.g. send an email, store in database)\n\n return 'Thank you for your message, {}!'.format(name)\n\n return render_template('contact.html')\n<\/code><\/pre>\n\n- Inside the
templates<\/code> directory, create a new file called contact.html<\/code>.<\/li>\n<\/ol>\nIn contact.html<\/code>, add the following code:<\/p>\n<!DOCTYPE html>\n<html>\n<head>\n <title>Contact<\/title>\n<\/head>\n<body>\n <h1>Contact Us<\/h1>\n\n <form method=\"POST\" action=\"\/contact\">\n <label for=\"name\">Name:<\/label>\n <input type=\"text\" id=\"name\" name=\"name\" required>\n\n <label for=\"email\">Email:<\/label>\n <input type=\"email\" id=\"email\" name=\"email\" required>\n\n <label for=\"message\">Message:<\/label>\n <textarea id=\"message\" name=\"message\" required><\/textarea>\n\n <button type=\"submit\">Submit<\/button>\n <\/form>\n<\/body>\n<\/html>\n<\/code><\/pre>\nNow, when you visit http:\/\/127.0.0.1:5000\/contact`, you will see a form where you can enter your name, email, and message. When you submit the form, the form data will be sent to the<\/code>\/contact` route where it will be processed. In this example, we simply return a thank you message to the user.<\/p>\nStep 7: Adding Static Files<\/h2>\n
Flask also makes it easy to serve static files such as CSS stylesheets, JavaScript files, and images.<\/p>\n
\n- Create a new directory called
static<\/code> in your project directory.<\/li>\n- Inside the
static<\/code> directory, create a file called styles.css<\/code>.<\/li>\n<\/ol>\nIn styles.css<\/code>, add some CSS code:<\/p>\nbody {\n font-family: Arial, sans-serif;\n}\n\nh1 {\n color: #ff0000;\n}\n\np {\n color: #0000ff;\n}\n<\/code><\/pre>\nTo use this stylesheet in your templates, update index.html<\/code> and about.html<\/code> as follows:<\/p>\n<!DOCTYPE html>\n<html>\n<head>\n <title>Home<\/title>\n <link rel=\"stylesheet\" type=\"text\/css\" href=\"{{ url_for('static', filename='styles.css') }}\">\n<\/head>\n<body>\n <h1>Welcome to the Home Page!<\/h1>\n <p>Feel free to explore the website.<\/p>\n<\/body>\n<\/html>\n<\/code><\/pre>\n<!DOCTYPE html>\n<html>\n<head>\n <title>About<\/title>\n <link rel=\"stylesheet\" type=\"text\/css\" href=\"{{ url_for('static', filename='styles.css') }}\">\n<\/head>\n<body>\n <h1>About Us<\/h1>\n <p>We are a team of developers passionate about Flask!<\/p>\n<\/body>\n<\/html>\n<\/code><\/pre>\nRestart the Flask development server and refresh the pages. You should see the text styled according to the CSS rules.<\/p>\n
Conclusion<\/h2>\n
In this tutorial, we covered the basics of creating a web application with Flask and Python. We learned how to set up a virtual environment, install Flask, create routes, use templates, handle form data, and serve static files.<\/p>\n
Flask provides a powerful yet simple way to create web applications in Python. By following this tutorial, you should now have a good foundation to build upon and create more complex applications.<\/p>\n
Keep practicing and experimenting with Flask to explore its full potential. Happy coding!<\/p>\n","protected":false},"excerpt":{"rendered":"
In this tutorial, we will learn how to create a web application using Flask, a lightweight web framework for Python. Flask allows us to quickly build web applications that are simple, scalable, and easy to understand. To follow along with this tutorial, you should have a basic understanding of Python Continue Reading<\/a><\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_import_markdown_pro_load_document_selector":0,"_import_markdown_pro_submit_text_textarea":"","footnotes":""},"categories":[1],"tags":[136,139,135,137,138,134],"yoast_head":"\nHow to Create a Web App with Flask and Python - Pantherax Blogs<\/title>\n<meta name=\"robots\" content=\"index, follow, max-snippet:-1, max-image-preview:large, max-video-preview:-1\" \/>\n<link rel=\"canonical\" href=\"http:\/\/localhost:10003\/how-to-create-a-web-app-with-flask-and-python\/\" \/>\n<meta property=\"og:locale\" content=\"en_US\" \/>\n<meta property=\"og:type\" content=\"article\" \/>\n<meta property=\"og:title\" content=\"How to Create a Web App with Flask and Python\" \/>\n<meta property=\"og:description\" content=\"In this tutorial, we will learn how to create a web application using Flask, a lightweight web framework for Python. Flask allows us to quickly build web applications that are simple, scalable, and easy to understand. To follow along with this tutorial, you should have a basic understanding of Python Continue Reading\" \/>\n<meta property=\"og:url\" content=\"http:\/\/localhost:10003\/how-to-create-a-web-app-with-flask-and-python\/\" \/>\n<meta property=\"og:site_name\" content=\"Pantherax Blogs\" \/>\n<meta property=\"article:published_time\" content=\"2023-11-04T23:13:54+00:00\" \/>\n<meta property=\"article:modified_time\" content=\"2023-11-05T05:48:29+00:00\" \/>\n<meta name=\"author\" content=\"Panther\" \/>\n<meta name=\"twitter:card\" content=\"summary_large_image\" \/>\n<meta name=\"twitter:label1\" content=\"Written by\" \/>\n\t<meta name=\"twitter:data1\" content=\"Panther\" \/>\n\t<meta name=\"twitter:label2\" content=\"Est. reading time\" \/>\n\t<meta name=\"twitter:data2\" content=\"6 minutes\" \/>\n<script type=\"application\/ld+json\" class=\"yoast-schema-graph\">{\n\t \"@context\": \"https:\/\/schema.org\",\n\t \"@graph\": [\n\t {\n\t \"@type\": \"Article\",\n\t \"@id\": \"http:\/\/localhost:10003\/how-to-create-a-web-app-with-flask-and-python\/#article\",\n\t \"isPartOf\": {\n\t \"@id\": \"http:\/\/localhost:10003\/how-to-create-a-web-app-with-flask-and-python\/\"\n\t },\n\t \"author\": {\n\t \"name\": \"Panther\",\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\"\n\t },\n\t \"headline\": \"How to Create a Web App with Flask and Python\",\n\t \"datePublished\": \"2023-11-04T23:13:54+00:00\",\n\t \"dateModified\": \"2023-11-05T05:48:29+00:00\",\n\t \"mainEntityOfPage\": {\n\t \"@id\": \"http:\/\/localhost:10003\/how-to-create-a-web-app-with-flask-and-python\/\"\n\t },\n\t \"wordCount\": 641,\n\t \"publisher\": {\n\t \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t },\n\t \"keywords\": [\n\t \"\\\"flask and python tutorial\\\"\",\n\t \"\\\"flask tutorial\\\"]\",\n\t \"\\\"how to create a web app\\\"\",\n\t \"\\\"python web development\\\"\",\n\t \"\\\"web app development tutorial\\\"\",\n\t \"[\\\"web app with flask and python\\\"\"\n\t ],\n\t \"inLanguage\": \"en-US\"\n\t },\n\t {\n\t \"@type\": \"WebPage\",\n\t \"@id\": \"http:\/\/localhost:10003\/how-to-create-a-web-app-with-flask-and-python\/\",\n\t \"url\": \"http:\/\/localhost:10003\/how-to-create-a-web-app-with-flask-and-python\/\",\n\t \"name\": \"How to Create a Web App with Flask and Python - Pantherax Blogs\",\n\t \"isPartOf\": {\n\t \"@id\": \"http:\/\/localhost:10003\/#website\"\n\t },\n\t \"datePublished\": \"2023-11-04T23:13:54+00:00\",\n\t \"dateModified\": \"2023-11-05T05:48:29+00:00\",\n\t \"breadcrumb\": {\n\t \"@id\": \"http:\/\/localhost:10003\/how-to-create-a-web-app-with-flask-and-python\/#breadcrumb\"\n\t },\n\t \"inLanguage\": \"en-US\",\n\t \"potentialAction\": [\n\t {\n\t \"@type\": \"ReadAction\",\n\t \"target\": [\n\t \"http:\/\/localhost:10003\/how-to-create-a-web-app-with-flask-and-python\/\"\n\t ]\n\t }\n\t ]\n\t },\n\t {\n\t \"@type\": \"BreadcrumbList\",\n\t \"@id\": \"http:\/\/localhost:10003\/how-to-create-a-web-app-with-flask-and-python\/#breadcrumb\",\n\t \"itemListElement\": [\n\t {\n\t \"@type\": \"ListItem\",\n\t \"position\": 1,\n\t \"name\": \"Home\",\n\t \"item\": \"http:\/\/localhost:10003\/\"\n\t },\n\t {\n\t \"@type\": \"ListItem\",\n\t \"position\": 2,\n\t \"name\": \"How to Create a Web App with Flask and Python\"\n\t }\n\t ]\n\t },\n\t {\n\t \"@type\": \"WebSite\",\n\t \"@id\": \"http:\/\/localhost:10003\/#website\",\n\t \"url\": \"http:\/\/localhost:10003\/\",\n\t \"name\": \"Pantherax Blogs\",\n\t \"description\": \"\",\n\t \"publisher\": {\n\t \"@id\": \"http:\/\/localhost:10003\/#organization\"\n\t },\n\t \"potentialAction\": [\n\t {\n\t \"@type\": \"SearchAction\",\n\t \"target\": {\n\t \"@type\": \"EntryPoint\",\n\t \"urlTemplate\": \"http:\/\/localhost:10003\/?s={search_term_string}\"\n\t },\n\t \"query-input\": \"required name=search_term_string\"\n\t }\n\t ],\n\t \"inLanguage\": \"en-US\"\n\t },\n\t {\n\t \"@type\": \"Organization\",\n\t \"@id\": \"http:\/\/localhost:10003\/#organization\",\n\t \"name\": \"Pantherax Blogs\",\n\t \"url\": \"http:\/\/localhost:10003\/\",\n\t \"logo\": {\n\t \"@type\": \"ImageObject\",\n\t \"inLanguage\": \"en-US\",\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\",\n\t \"url\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t \"contentUrl\": \"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg\",\n\t \"width\": 1024,\n\t \"height\": 1024,\n\t \"caption\": \"Pantherax Blogs\"\n\t },\n\t \"image\": {\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/logo\/image\/\"\n\t }\n\t },\n\t {\n\t \"@type\": \"Person\",\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7\",\n\t \"name\": \"Panther\",\n\t \"image\": {\n\t \"@type\": \"ImageObject\",\n\t \"inLanguage\": \"en-US\",\n\t \"@id\": \"http:\/\/localhost:10003\/#\/schema\/person\/image\/\",\n\t \"url\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t \"contentUrl\": \"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g\",\n\t \"caption\": \"Panther\"\n\t },\n\t \"sameAs\": [\n\t \"http:\/\/localhost:10003\"\n\t ],\n\t \"url\": \"http:\/\/localhost:10003\/author\/pepethefrog\/\"\n\t }\n\t ]\n\t}<\/script>\n<!-- \/ Yoast SEO Premium plugin. -->","yoast_head_json":{"title":"How to Create a Web App with Flask and Python - Pantherax Blogs","robots":{"index":"index","follow":"follow","max-snippet":"max-snippet:-1","max-image-preview":"max-image-preview:large","max-video-preview":"max-video-preview:-1"},"canonical":"http:\/\/localhost:10003\/how-to-create-a-web-app-with-flask-and-python\/","og_locale":"en_US","og_type":"article","og_title":"How to Create a Web App with Flask and Python","og_description":"In this tutorial, we will learn how to create a web application using Flask, a lightweight web framework for Python. Flask allows us to quickly build web applications that are simple, scalable, and easy to understand. To follow along with this tutorial, you should have a basic understanding of Python Continue Reading","og_url":"http:\/\/localhost:10003\/how-to-create-a-web-app-with-flask-and-python\/","og_site_name":"Pantherax Blogs","article_published_time":"2023-11-04T23:13:54+00:00","article_modified_time":"2023-11-05T05:48:29+00:00","author":"Panther","twitter_card":"summary_large_image","twitter_misc":{"Written by":"Panther","Est. reading time":"6 minutes"},"schema":{"@context":"https:\/\/schema.org","@graph":[{"@type":"Article","@id":"http:\/\/localhost:10003\/how-to-create-a-web-app-with-flask-and-python\/#article","isPartOf":{"@id":"http:\/\/localhost:10003\/how-to-create-a-web-app-with-flask-and-python\/"},"author":{"name":"Panther","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7"},"headline":"How to Create a Web App with Flask and Python","datePublished":"2023-11-04T23:13:54+00:00","dateModified":"2023-11-05T05:48:29+00:00","mainEntityOfPage":{"@id":"http:\/\/localhost:10003\/how-to-create-a-web-app-with-flask-and-python\/"},"wordCount":641,"publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"keywords":["\"flask and python tutorial\"","\"flask tutorial\"]","\"how to create a web app\"","\"python web development\"","\"web app development tutorial\"","[\"web app with flask and python\""],"inLanguage":"en-US"},{"@type":"WebPage","@id":"http:\/\/localhost:10003\/how-to-create-a-web-app-with-flask-and-python\/","url":"http:\/\/localhost:10003\/how-to-create-a-web-app-with-flask-and-python\/","name":"How to Create a Web App with Flask and Python - Pantherax Blogs","isPartOf":{"@id":"http:\/\/localhost:10003\/#website"},"datePublished":"2023-11-04T23:13:54+00:00","dateModified":"2023-11-05T05:48:29+00:00","breadcrumb":{"@id":"http:\/\/localhost:10003\/how-to-create-a-web-app-with-flask-and-python\/#breadcrumb"},"inLanguage":"en-US","potentialAction":[{"@type":"ReadAction","target":["http:\/\/localhost:10003\/how-to-create-a-web-app-with-flask-and-python\/"]}]},{"@type":"BreadcrumbList","@id":"http:\/\/localhost:10003\/how-to-create-a-web-app-with-flask-and-python\/#breadcrumb","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"http:\/\/localhost:10003\/"},{"@type":"ListItem","position":2,"name":"How to Create a Web App with Flask and Python"}]},{"@type":"WebSite","@id":"http:\/\/localhost:10003\/#website","url":"http:\/\/localhost:10003\/","name":"Pantherax Blogs","description":"","publisher":{"@id":"http:\/\/localhost:10003\/#organization"},"potentialAction":[{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"http:\/\/localhost:10003\/?s={search_term_string}"},"query-input":"required name=search_term_string"}],"inLanguage":"en-US"},{"@type":"Organization","@id":"http:\/\/localhost:10003\/#organization","name":"Pantherax Blogs","url":"http:\/\/localhost:10003\/","logo":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/","url":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","contentUrl":"http:\/\/localhost:10003\/wp-content\/uploads\/2023\/11\/cropped-9e7721cb-2d62-4f72-ab7f-7d1d8db89226.jpeg","width":1024,"height":1024,"caption":"Pantherax Blogs"},"image":{"@id":"http:\/\/localhost:10003\/#\/schema\/logo\/image\/"}},{"@type":"Person","@id":"http:\/\/localhost:10003\/#\/schema\/person\/b63d816f4964b163e53cbbcffaa0f3d7","name":"Panther","image":{"@type":"ImageObject","inLanguage":"en-US","@id":"http:\/\/localhost:10003\/#\/schema\/person\/image\/","url":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","contentUrl":"http:\/\/2.gravatar.com\/avatar\/b8c0eda5a49f8f31ec32d0a0f9d6f838?s=96&d=mm&r=g","caption":"Panther"},"sameAs":["http:\/\/localhost:10003"],"url":"http:\/\/localhost:10003\/author\/pepethefrog\/"}]}},"jetpack_sharing_enabled":true,"jetpack_featured_media_url":"","_links":{"self":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/3889"}],"collection":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/comments?post=3889"}],"version-history":[{"count":1,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/3889\/revisions"}],"predecessor-version":[{"id":4665,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/posts\/3889\/revisions\/4665"}],"wp:attachment":[{"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/media?parent=3889"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/categories?post=3889"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/localhost:10003\/wp-json\/wp\/v2\/tags?post=3889"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}