Scribd
Upload
31 views

Tutorial Fullstack

The document outlines the steps to create a full stack web application using Django for the backend, Django Rest Framework for APIs, and Vue.js for the frontend. It includes instructions on setting up virtual environments, creating Django and Vue.js projects, building out models, views, and serializers in Django, and connecting the frontend and backend using CORS. Key steps are to install necessary technologies like Python, Django, Vue CLI, create a Django project and app, configure the ORM, build out APIs with Django Rest Framework, and make requests to the API from a Vue.js frontend.

Uploaded by

Mufid
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
31 views

Tutorial Fullstack

The document outlines the steps to create a full stack web application using Django for the backend, Django Rest Framework for APIs, and Vue.js for the frontend. It includes instructions on setting up virtual environments, creating Django and Vue.js projects, building out models, views, and serializers in Django, and connecting the frontend and backend using CORS. Key steps are to install necessary technologies like Python, Django, Vue CLI, create a Django project and app, configure the ORM, build out APIs with Django Rest Framework, and make requests to the API from a Vue.js frontend.

Uploaded by

Mufid
Copyright
© © All Rights Reserved
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 2

A.

SKILL:
1. Front-end:
- HTML5
- CSS (BootStrap)
- JavaScript (Vue.js)
2. Back-end:
- Python (Django)

B. TECH STACK:
1. Front-end: HTML, CSS, JavaScript, BootStrap, Vue JS
2. Back-end: Python, Django

C. I want use:
1. Front-end: BootStrap, Vue JS
2. Back-end: Django Rest Framework

D. LANGKAH - LANGKAH:
1. Install GIT https://git-scm.com/downloads (Opsional)
2. Install VSC https://code.visualstudio.com/
3. Install Python https://www.python.org/downloads/
4. Create Virtual Environment
- Open GIT / CMD (Command Prompt)
- Run "python -m venv [your_venv_name]
- Activate the venv "[your_venv_name]\Script\activate" , write "deactive" for non active
- Yes now you are in your virtual environment

5. Create Django Project


- Go to your work path
- run "pip install Django"
- run "django-admin --version" for see your django version
- run "django-admin startproject [project_name]"
- cd [project_name]
- run "python manage.py runserver"
- Open the http://127.0.0.1:8000/ on your browser

6. Create Admin Web


- Check Database "python manage.py makemigrations"
- Create Database "python manage.py migrate"
- Run "python manage.py createsuperuser" for create superuser
- Running Server "python manage.py runserver"
- Open the http://127.0.0.1:8000/admin on your browser

7. Create Django App


- Run "python manage.py startapp [app_name]"
- Go to setting/py -> input your app name into installed_app
- Create your own model in models.py
(Note: run python manage.py makemigrations & migrate setiap ada perubahan)
- Make and Import model at admin.py
- Open the http://127.0.0.1:8000/admin for see your chance

- Create a viewset and url in urls.py in project


- Create a Serializer.py in project
- pip install djangorestframework
- Go to setting/py -> input your "rest_framework", into setting.py
- edit your app in urls.py
- Open the http://127.0.0.1:8000/api for see your api
- So dont use postman again for check, it’s same

8. Create Vue JS Project


- Install Vue CLI https://cli.vuejs.org/
- Install CLI "npm install -g @vue/cli
- Make project "Vue create your_app"
- cd your_app
- npm run serve
- Open the http://127.0.0.1:8080/ on your project

- Edit App.vue and Edit Component "Index.html" etc


- Make BootStrap the CSS Framework
- pip install "django-cors-headers" and input in setting.py "corsheaders"

You might also like