Menu

Log in

Sign up

From beginner to master of web design, coding, infrastructure operation, business development and marketing

  • COURSES
  • HTML & CSS Introduction
  • HTML & CSS Coding with AI
  • Linux Introduction
  • Docker Basics
  • Git & GitHub Introduction
  • JavaScript Coding with AI
  • Django Introduction
  • AWS Basics
  • Figma Introduction
  • SEO Tutorial for Beginners
  • SEO with AI
  • OTHERS
  • About
  • Terms of Service
  • Privacy Policy

© 2024 D-Libro. All Rights Reserved

Django IntroductionChapter 4. Create CRUD Web Application

Check Developing App UI on Mobile Device

Check Developing App UI on Mobile Device

Testing Django App UI on Mobile Devices

During web application development, you may also want to check the in-progress design on mobile devices. Using a local IP address, you can browse the app you are developing. Here are the key steps on how to do it.

1. Check your local IP address

There are several ways to check your local IP address.

Check through the command line

First, you can check it from the command line. Run the ifconfig command (ipconfig command for Windows). As the command displays a lot of lines, you may need to search it with "192" by pressing Command + F. "192" is typically used for local IP addresses.

Command Line - INPUT
ifconfig
Command Line - RESPONSE
lo0: flags=xxx<up,loopback,running,multicast> mtu xxxx
:
inet 192.168.xx.xx netmask 0xffffff00 broadcast 192.168.xx.xx
:

You can also use the grep command to get the answer directly, like shown below.

Command Line - INPUT
ifconfig | grep 192
Command Line - RESPONSE
inet 192.168.xx.xx netmask 0xffffff00 broadcast 192.168.xx.xx

Check through System Preferences

You can also check the local IP address in System Preferences on Mac.

1. Go to System Preferences and click on the Network icon

Mac Network icon

2. Click on the advanced button on the bottom left

Mac Advanced button

3. Go to the wifi setting and check the TCP/IP tab

Mac TCP/IP settings

2. Edit settings.py – add the IP address under ALLOWED_HOSTS

Open the settings.py file and edit the ALLOWED_HOSTS section like shown below. The reason for also adding "localhost" is that you may want to run the runserver command using the localhost address. If you don't add "localhost" while adding another IP address, you cannot use the app using the localhost address.

config/settings.py
ALLOWED_HOSTS = ["localhost", "192.168.xx.xx"]

3. Execute the runserver command with specifying IP address and port

Go to the project directory in your terminal and execute the command like shown below.

Command Line - INPUT
python manage.py runserver 192.168.86.96:8000

4. Check the results in a browser

Go to 192.xx.xx.xx:8000/employee-learning/course-list/ in your browser. 192.xxx is your local IP address. You can confirm that the website is accessible on your mobile device.

Note: Make sure your mobile device is connected to the same WiFi as your local computer running the Django application with the runserver command.

5. (Optional) Make the local IP address static

Usually, the local IP address is a dynamic IP address defined by DHCP (Dynamic Host Configuration Protocol). Your computer's IP address will be updated regularly. When the IP address changes, you must redo the settings above. If you want to keep the same configuration, make the IP address static in the WiFi setting. However, you need to switch back to DHCP when using other WiFi networks, such as WiFi in a cafe. Otherwise, your laptop may not connect to the new WiFi network.


You can also learn this topic offline. Click AmazonKindle.

More Topics to Explore

Django Models: Understanding Data Field Types

Django Models – Data Field Type

Setting Up Django Allauth: Installation and Initial Settings

Django Allauth (2) – Installation and Initial Settings

Attributes of Django Generic Views

Generic View Basic Attributes

Django Models: Understanding Data Field Types

Django Models – Data Field Type

Setting Up Django Allauth: Installation and Initial Settings

Django Allauth (2) – Installation and Initial Settings

Attributes of Django Generic Views

Generic View Basic Attributes

Tags:

ALLOWED_HOSTS

Local IP address

DHCP

Django Introduction
Course Content

Chapter 1. Django Key Concepts

Web Framework and Django

Websites vs. Django Web Apps

How Django Handles HTTP Request and HTTP Response

Django's MVT Framework

Django Templates vs. Django APIs

Chapter 2. Django Quick Start Guide

Install Python

Install Visual Studio Code

Create Project Directory

Set Up Virtual Environment

Install Django

Start Django Project

Run Server

Database Migration

URL dispatcher – urls.py

Create Superuser and Log In to Django Admin

Start App

Create HTML Templates

Create Views

Add URL Patterns

Project vs. App

Chapter 3. Django Models and Databases

Create a Database in Django

Relational Database

Create Django Models

Makemigrations and Migrate

Add Models in Django Admin – admin.py

Change Display Name of Record Objects

Django Models – Data Field Type

Django Models – Field Options

Django Models – Help Text Option

Django Models – Choices Option

Django Models – DateField with datetime Module

Django Models – Relationship Fields

Django Models – ID

Django Models – ForeignKey (OneToMany Relationship)

Django Models – OneToOneField

Django Models – ManyToManyField

Chapter 4. Create CRUD Web Application

CRUD Web Application

Basic CRUD Structure in Django

Django Generic Views

How To Write Class-Based Views with Generic Views

Generic View Basic Attributes

URL Dispatcher for CRUD Views

Django Templates for CRUD Views

Django Template Language (DTL)

Template for List Page

get_FOO_display method

Template for Detail Page

Template with Model Relations

Template for Create and Update Page

Template for Delete Page

Add Links – {% url %} tag

Extend Templates – {% extends %} tag

Check Developing App UI on Mobile Device

Django Templates with Bootstrap

Crispy Forms

Customize Views (1) – Change List Order

Customizing Views (2) – Filter Lists

Context

Customize Views (3) – Add Extra Context

Modularize Templates – {% include %} tag

Static Files in Development Environment – {% static %} tag

STATIC_URL and STATICFILES_DIRS

Create Index HTML

Chapter 5. User Management

User Authentication

Overview of User Management Functions

User Management Function Development with Django

Approaches to Building User Management Functions in Django

Django Allauth (1) – Introduction

Django Allauth (2) – Installation and Initial Settings

Django Allauth (3) – Email Verification via Console

Django Allauth (4) – Email Verification via Gmail

Django Allauth (5) – Social Login with GitHub

Django Allauth (6) – Social Login with Google

Django Allauth (7) – Allauth Template File Setup

Django Allauth (8) – Add Basic Styling with Bootstrap and Crispy Forms

Django Allauth (9) – Customize Sign-in and Sign-up Pages

User Models

Login Required – LoginRequiredMixin

User Login Status Icon on Navigation Bar

Chapter 6. Deploy Django App

Overview of Django App Deployment (1)

Overview of Django App Deployment (2)

Key Steps of Django App Deployment

Hosting Service Initial Settings (1) – AWS Lightsail setup

Hosting Service Initial Settings (2) – SSH Remote Connection

Manage Local Computer and Remote Server Simultaneously

Tips for Managing Local Development and Remote Production Environment

Hosting Service Initial Settings (3) – Clone Project Directory with GitHub

Production Database Setup

Django Production Settings (1) – Settings.py for Development and Production

Django Production Settings (2) – Production Settings

Django Production Settings (3) – django-environ and .env file

Static File Settings

Django and Dependency Installation on Production Server

Web Server and Application Server in Django

Application Server Setup – Gunicorn

Web Server Setup – Nginx

Domain Setup

SSL Setup – Certbot

Email Setting – SendGrid

Social Login for Production

Manage Local Development and Remote Production Environment

Chapter 1. Django Key Concepts

Web Framework and Django

Websites vs. Django Web Apps

How Django Handles HTTP Request and HTTP Response

Django's MVT Framework

Django Templates vs. Django APIs

Chapter 2. Django Quick Start Guide

Install Python

Install Visual Studio Code

Create Project Directory

Set Up Virtual Environment

Install Django

Start Django Project

Run Server

Database Migration

URL dispatcher – urls.py

Create Superuser and Log In to Django Admin

Start App

Create HTML Templates

Create Views

Add URL Patterns

Project vs. App

Chapter 3. Django Models and Databases

Create a Database in Django

Relational Database

Create Django Models

Makemigrations and Migrate

Add Models in Django Admin – admin.py

Change Display Name of Record Objects

Django Models – Data Field Type

Django Models – Field Options

Django Models – Help Text Option

Django Models – Choices Option

Django Models – DateField with datetime Module

Django Models – Relationship Fields

Django Models – ID

Django Models – ForeignKey (OneToMany Relationship)

Django Models – OneToOneField

Django Models – ManyToManyField

Chapter 4. Create CRUD Web Application

CRUD Web Application

Basic CRUD Structure in Django

Django Generic Views

How To Write Class-Based Views with Generic Views

Generic View Basic Attributes

URL Dispatcher for CRUD Views

Django Templates for CRUD Views

Django Template Language (DTL)

Template for List Page

get_FOO_display method

Template for Detail Page

Template with Model Relations

Template for Create and Update Page

Template for Delete Page

Add Links – {% url %} tag

Extend Templates – {% extends %} tag

Check Developing App UI on Mobile Device

Django Templates with Bootstrap

Crispy Forms

Customize Views (1) – Change List Order

Customizing Views (2) – Filter Lists

Context

Customize Views (3) – Add Extra Context

Modularize Templates – {% include %} tag

Static Files in Development Environment – {% static %} tag

STATIC_URL and STATICFILES_DIRS

Create Index HTML

Chapter 5. User Management

User Authentication

Overview of User Management Functions

User Management Function Development with Django

Approaches to Building User Management Functions in Django

Django Allauth (1) – Introduction

Django Allauth (2) – Installation and Initial Settings

Django Allauth (3) – Email Verification via Console

Django Allauth (4) – Email Verification via Gmail

Django Allauth (5) – Social Login with GitHub

Django Allauth (6) – Social Login with Google

Django Allauth (7) – Allauth Template File Setup

Django Allauth (8) – Add Basic Styling with Bootstrap and Crispy Forms

Django Allauth (9) – Customize Sign-in and Sign-up Pages

User Models

Login Required – LoginRequiredMixin

User Login Status Icon on Navigation Bar

Chapter 6. Deploy Django App

Overview of Django App Deployment (1)

Overview of Django App Deployment (2)

Key Steps of Django App Deployment

Hosting Service Initial Settings (1) – AWS Lightsail setup

Hosting Service Initial Settings (2) – SSH Remote Connection

Manage Local Computer and Remote Server Simultaneously

Tips for Managing Local Development and Remote Production Environment

Hosting Service Initial Settings (3) – Clone Project Directory with GitHub

Production Database Setup

Django Production Settings (1) – Settings.py for Development and Production

Django Production Settings (2) – Production Settings

Django Production Settings (3) – django-environ and .env file

Static File Settings

Django and Dependency Installation on Production Server

Web Server and Application Server in Django

Application Server Setup – Gunicorn

Web Server Setup – Nginx

Domain Setup

SSL Setup – Certbot

Email Setting – SendGrid

Social Login for Production

Manage Local Development and Remote Production Environment