Posts

Integrating React Front-End and Django/Python/PostgreSQL backend

Image
So far, we have created the API and confirmed its working on the django admin page. Now, we will look at how to create a react app to display data from the database via django. 1. Setup the react App Install react using the following command from the root directory: npm install create-react-app Create a react app, and call it frontend npx create-react-app frontend start the server cd frontend npm start The default react app will show up on the localhost://3000.  Change the public/index.html page to include the root element. We will use this in the src/index.js file in just a while. <! DOCTYPE html > < html lang = "en" >   < head >     < meta charset = "utf-8" />     < link rel = "icon" href = "%PUBLIC_URL%/favicon.ico" />     < meta name = "viewport" content = "width=device-width, initial-scale=1" />     < meta name = "theme-color" content = "#000000" /...

Python and Django Full Stack - Using Django models to communicate with PostgreSQL Database

Image
Django – Using Models to communicate with PostgreSQL Database So far we have learnt to set up our project and its applications, create views and map URL, using simple templates and tags, and serving media files.   Now, we will learn about Django models and how to use them to communicate with the postgreSQL database. We will also learn about the Django admin interface. 1.1.     Settings to connect to PostgreSQL Django comes with an inbuilt sqllite3 database. In the project's settings.py file, there is a section on DATABASES which by default points to the sqllite3 database. To ask Django to connect to PostgreSQL, change the 'default' DATABASES dictionary in the Django project's settings.py file, like so:   DATABASES = { ' default ' : {         ' ENGINE ' : ' django.db.backends.postgresql ' ,         ' NAME ' : ' fooddb ' ,         ' USER ' : ' xxxxx ' ,         ' PASSWORD ' : ...

Python and Django Full Stack - Have React speak to PostgreSQL

Backend Overview The most popular way of getting ReactJS to speak to PostgreSQL is using a backend framework that can handle the communication between the two, such as Express.js or Django.  While the PERN stack (PostgreSQL, Express, React, Node.js) is a popular full-stack solution for building web applications with React and PostgreSQL, the  React/Django/PostgreSQL stack is popular for its versatility and ease of use, and is suitable for large-scale web applications that require a solid backend. In this post, we will work with the Django framework and achieve our objective of having react communicate with PostgreSQL. ReactJS/Django/PostgreSQL stack Here's a general overview of how to connect ReactJS, Django, and PostgreSQL to build a full-stack web application: Setting up the backend: Install Django using pip:  pip install django Create a new Django project using the command line:  django-admin startproject projectname Create a new Django app within the project:...

Python and PostgreSQL – Creating database, schema, tables and inserting data using python library psycopg2

In this post, we will learn to create a database called 'foodApp' in postgreSQL,a schema called 'foodschm' within the database, a table called 'menu' within the schema, and finally, insert data into the table 'menu'.   Install PostgreSQL from https://www.postgresql.org/download/ .  Install psycopg2 using pip install.  C reate a folder under your working directory. Let's call it 'foodApp'. Inside  'foodApp', create a directory called backend.Next, i nside the folder backend, create the program called main.py with the code as follows: 1.       Import psycopg2  import psycopg2 2.       Define database connection properties and connect to the host. Connect to the default database ‘postgres’ with whatever password you gave it during installation.    Make sure to keep the autocommit to true. Without this, postgresql will throw up a transaction error.  Use the connection object to create a cu...