Build an eCommerce Website
Install sublime text
Run python commands from cmd
Download get-pip.py to folder C:\User\Z\
python get-pip.py
cd desktop
pip install virtualenv
virtualenv tryten
cd tryten
scripts\activate
In the screen, you'll see <tryten>
.\Scripts\activate
pip install django==1.10
django-admin.py startproject src
cd src
dir to find out if manage.py is in root of project (equivalent of ls in ios)
python manage.py migrate
python manage.py createsuperuser
python manage.py runserver
python manage.py startapp profiles
python manage.py makemigrations
python manage.py migrate
Run CSS
python manage.py collectstatic
- Followup: List of all commands in manage.py
127.0.0.1:8000
127.0.0.1:8000/admin
127.0.0.1:8000/accounts/login
https://www.youtube.com/watch?v=9Wbfk16jEOk&t=6384s
- Followup: Allauth doesn't load in login page. Tried reinstalled version 1.10 django, but doesn't work
- Need to reinstall every time start django anew? Can't seem to reload what I did yesterday...
Github
Contents: 0:00 Install Django 6:33 Python Anywhere 15:21 Restructure directories 17:05 Create profiles app 17:50 Create profiles model 20:41 Migrate model to database 21:18 Adding database fields 24:04 Manipulating URLs 26:46 Admin and modifying models 34:47 Create home page with templates 38:30 Static files directories 42:45 Using CSS in html 46:12 Jinja logic in templates 50:33 Adding about page 56:30 Use Bootstrap for css 1:01:56 Use Bootstrap for javascript 1:05:33 Customize Bootstrap 1:08:29 Change navbar color 1:10:12 Make navbar functional 1:13:06 Add jumbotron 1:15:44 Highlight navbar buttons 1:18:44 Create contact page 1:22:34 Create contact form 1:30:52 Send email via Gmail 1:36:42 Test email sending 1:37:48 Work on contact view context 1:41:00 Display confirm message 1:45:11 Remove locals() from all views 1:46:05 Install crispy forms 1:49:00 Modify crispy using bootstrap grids 1:54:04 Install Allauth 1:58:07 Explaination of Allauth settings vars 2:05:03 Test Allauth functionality 2:05:51 Customize Allauth templates 2:12:49 Put Allauth links in Navbar 2:16:03 Create user profile page 2:29:04 Create checkout page using Stripe 2:38:45 Continue configuring Stripe 2:47:47 Stripe API error: TLS 1.0 2:48:40 Track customer orders 2:56:34 Track user login 3:12:55 Upload project to Python Anywhere
|- models.py
|- admin.py
|- settings.py #installed apps
|- urls.py #views.home
|- views.py
settings.py
add in bottom line 122:-
if DEBUG:
STATIC_ROOT = os.path.join(os.path.dirname(BASE_DIR), "static", "static-only")
STATICFILES_DIRS = (
os.path.join(os.path.dirname(BASE_DIR), "static", "static"),
)
models.py
from django.db import models
# Create your models here.
class profile(models.Model):
name = models.CharField(max_length=120)
description = models.TextField(default='description default text')
location = models.CharField(max_length=120, default='my location default')
job = models.CharField(max_length=120, null=True)
def __unicode__(self):
return self.name
Using Bootstrap for CSS
static
|- javascript
|- css
base.html
Apply stylesheet
{% block content %}
Text inside
{% endblock %}
{% csrf_token %} # improve security, required by django
Theme template for bootstrap
https://getbootstrap.com/docs/3.4/examples/theme/
Relevant Terms
- jumbotron = big gray box that draws attention
- render = become, make
- ellipsis = suspension points (...)
Sending email
https://docs.djangoproject.com/en/1.10/topics/email/
Form Field
https://docs.djangoproject.com/en/2.2/ref/forms/fields/
Grid Options: Consist of 12 columns
https://getbootstrap.com/docs/3.4/css/#grid-options
Crispy Forms
https://django-crispy-forms.readthedocs.io/en/latest/
pip install --upgrade django-crispy-forms
CRISPY_TEMPLATE_PACK = 'uni_form'
{% load crispy_forms_tags %}
Allauth
https://django-allauth.readthedocs.io/en/latest/installation.html
https://django-allauth.readthedocs.io/en/latest/configuration.html
https://docs.djangoproject.com/en/2.2/topics/auth/default/#the-login-required-decorator
Update: Currently at stripe payment. The instructions are outdated. Code is different than 2016.
- Tip: edit html directly when inspecting element in chrome. Copy and paste.