Blog web

Blogweb is the blogpost website made for the educational purposes for the milestone project. This website is created for the users who love social media. In this blogweb website, there are a lot of functionalities for the users like, users can create the posts with the images, can add or select the category for the post, read the post, edit or update the post, delete the post, can like the post and can leave a comment on the post.

The deployed link can be found here: Live Site

Ux design
Existing Features
Technology Used
Agile Technique
Features left to implement
Testing
Bugs
Deployment
Credits

Ux design:

Strategy:

Blogweb is the blogpost website created for the purpose of creating blogposts and share information to the users. The key points while creating this website are following below:
- Create an online presence
- Interact with users who share information through blogs/posts
- Create a category posts/blogs
- Create a user friendly environment
- Display key information to the users
- Attract more users
- Quick and intuitive navigation
- Easy access to key information
- Quick and hassle-free processes
- Create entertainment environment

User stories(Scope):

User stories were created for the project by keeping in mind the story points and moscow method to complete the website accordingly.

Wireframes(Skeleton):

Wireframes were created for the project for the purpose of ux planning and designing of the website.
- Home page desktop:
- Home page mobile:
- Post detail page:
- Add post page:
- Add category page:
- Edit post page:
- Sign up page:
- Sign in page:
- Delete post page:

Surface:

Colours:
- #d85428, #ffff00, #2a4878, #abbdd9, #a3cfc7, black, #e8e2d8, white, #0A66C2, lightgray, combination of these colours were used in the website for foreground and background.
Typograpghy:
- The fonts chosen for this project were taken from google fonts
  - font-family: 'Lato'
  - font-family: 'Roboto'
Icons:
- The icons in the website were all taken from Font awesome
Images:
- Cloudinary is used in this project for images purposes.

Structure:

Information Architecture:
- The navigation for this website was designed to be user-friendly and intuitive. Grouping pages according to relationships and functionality as shown below.
Entity Relationship Model(database schema):
- The ERM design demonstrates how the information will be stored while the data is at rest. Here we can see one-to-many relationships between the User model and the Comment and/or Post model. The same relationship is established between the Post model and the Comment. The rest of the relationships are derived from Django built-in models such as User, AbstractUser, Session etc.

Existing Features

Navbar:
- Users can read the category blogs by clicking on the category in the dropdown of categories, sign up and login using the links showing on the navbar.
After login Navbar:
- Users can read the categories, add post, add category and logout using the links showing on the navbar.
Read the category blogpost:
- Users can read the category post by clicking on the categories dropdown link showing on the navbar.
Add category:
- Users can add the category through the form below to create the desired category posts.
Sign Up:
- Users can register their account by clicking on the sign up button showing on the navbar.
Login:
- Users can login by clicking on the button showing on the navbar next to sign up so that they can enjoy the functionalities of the website.
- Note: Users can only create, edit and delete the post by registering their account on the website.
Logout:
- Users logout/sigout page should look like the image below:
Add the post:
- Users can create the posts along with uploading images
- steps to create the posts are as below
  - First put the title in the title field for your post.
  - Put the title tag for your post in the slug field.
  - You can select the category by clicking on the category field or you can add the category by clicking on the 'Add Category' option showing on the navbar for the post according to your choice.
  - You can add the content for your post and style it using the editor showing in the content field.
  - You can also upload the image using the upload image field for your post.
  - If users don't upload the image for their post, then default image will be shown for their post.
Read the post:
- Users can read the postblog by clicking on the title link showing below the image of the post.
Like the post:
- Users can like the post by clicking on the icon of thumbs up.
Comment on the post:
- Users can comment on the post by writing in the body field showing.
Edit or Update the post:
- Users can edit or update the post by clicking on the edit button showing below the image of the post.
Delete the post:
- Users can delete the post by clicking on the delete button showing below the image of the post.
- Users cannot delete the others post. If they try to delete the others post then a message will be displayed showing "sorry, you are not allowed to delete this post"
Site pagination:
- Site is paginated for 10 posts at one page when posts will be more than 10, it will display on the next page.
Footer:
- Footer displays the social link and purpose of post.

Technology Used

Agile Technique:

Agile technique is used in this project. You can have a look here Agile
Kanban board was used in this project to handle user stories.
User stories were created for following the agile technique
MOSCOW method was used to prioritize the task using the label of MustHave, ShouldHave, CouldHave and WontHave.
Milestones were created for the project to complete the tasks.

Features left to implement

I will add the user profile with image upload option in the future for the users who create the account and also edit profile option so they can edit the profile.

Testing

Python and Javascript Testing:

automated tests for python and javascript were undertaken to check the functioning of the codes and it were all passed.

Validator Testing

I have manually tested this project by doing the following:

Passed the code through a PEP8 linter and confirmed there are no problems
PEP8
- No errors were returned from PEP8 checker
- All the errors were removed from the files to fulfil the requirements of PEP8 and was made sure by checking the errors using the command "python3 -m flake8". Only those few errors were left who creates the problems in the website by adjusting like in env.py file or setting.py etc.
  
  blog-test-models, blog-test-views, blog-urls, blog-models, blog-test-forms, blog-admin, blog-apps, blog-forms, blogweb-wsgi, blogweb-urls, blogweb-asgi
Html checker:
- No errors were returned from W3C Html
  
  Add-category, Post-detail, Signup, Sign-in, Categories-page, Delete-post
- Add post and Edit post:
  - In add post and edit post templates django built in form was used so thats why errors are coming from django built in form and django summernote but not from templates written by me.
  - As you can see here in Add-post-htmlcheck and Edit-post-htmlcheck
CSS checker:
- No errors were returned from W3C CSS
JS checker:
- No errors were returned from JS HINT
  
  js-1, js-2
Accessiblity:
- I confirmed that colours and font chosen are easy to read and accessible by running it through lighthouse in devtools.
- Generated report is here below
- Desktop:
  - Add-post-desktop, Add-category-desktop, Sign-out-desktop, Category-postblog-desktop, edit-post-desktop, delete-post-desktop, Sign-up-desktop, Login-desktop
- Mobile:
  - Home-mobile, Add-post-mobile, Add-category-mobile, Sign-out-mobile, Category-postblog-mobile, edit-post-mobile, delete-post-mobile, Sign-up-mobile, Login-mobile

Bugs:

Fixed bugs:

While creating the project I faced the bug of relation does not exist error, which actually took a lot of my time to solve. It was actually the migrations error because I accidentally deleted some migrations in my project.
Steps I took to solve:
- Firstly, I deleted all the migrations in my apps except init.py file
- Then I deleted the db.sqlite3 file showing in the files
- Because the database I was using connected with heroku so I had to reset the database in the heroku platform and also I deleted the heroku postgres and added the new one and also added the new DATABASE_URL in the env.py file
- Then I commented out the admin.py, forms.py, models.py, views.py, urls.py files and also one line in the urls of blogweb in which blog app was connected
- Then I ran the command python3 manage.py makemigrations and python3 manage.py migrate
- After that I uncommented the models.py file and ran the commands python3 manage.py makemigrations blog and python3 manage.py migrate blog for my models
- And finally I uncommented all the files which I commented out before and ran the server using the command python3 manage.py runserver and the bug was fixed in this way.

Unfixed Bugs:

No unfixed bugs.

Deployment:

This project was deployed using the code institute's mock terminal for heroku. Following steps were taken for the deployment of the project:

Login to Heroku and Create a New App
Give the App a name, it must be unique and select a region closest to you
Click on 'Create App' and now you can see the project dashboard
Click on the 'Resources' tab and search for 'Heroku Postgres' as this is the add-on you will use for the deployed database
Click on the 'Settings' tab at the top of the page.
Scroll down to 'Config Vars' and click 'Reveal Config Vars'. Here the database URL is stored, it is the connection to the database, so this must be copied and stored within env.py as a root level file. The env.py file is where the project secret environment variables are stored. This file is then added to a .gitignore file so it isn't stored publicly within the project repository.
The secret key needs to be created within the projects env.py file on GitPod and then added to the Config Vars on Heroku. Once added, go to the settings.py file on GitPod.
Within the settings.py file you need to import several libraries:
- import os
- import dj_database_url
- from django.contrib.messages import constants as messages
- if os.path.isfile('env.py'):
  - import env
Then, we need to replace the current insecure secret key with os.environ.get('SECRET_KEY)', that we set within the env.py file.
Once the secret key is replaced, scroll down to DATABASES to connect to the Postgres database. Comment out the current databases and add the following:
- DATABASES = { 'default': dj_database_url.parse(os.environ.get('DATABASE_URL')) }
The next step is to connect the project to WhiteNoise, which is where the static files will be stored. You can find a full explanation of how to install WhiteNoise here
Then on Heroku add to the Config Vars, DISABLE_COLLECTSTATIC = 1, as a temporary measure to enable deployment without any static files, this will be removed when it is time to deploy the full project.
Next we need to tell Django where to store the media and static files. Towards the bottom of settings.py file we can add:
- STATIC_URL = '/static/'
- STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
- STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
- MEDIA_URL = '/media/'
Then we need to tell Django where the templates will be stored. At the top of settings.py, under BASE_DIR (the base directory), add a templates directory and then scroll down to TEMPLATES and add the templates directory variable to 'DIRS': [].
Now we have to add our Heroku Host Name into allowed hosts in settings.py file:
- ALLOWED_HOSTS = ['YOUR-APP-NAME-HERE', 'localhost']
Finally, to complete the first deployment set up of the skeleton app, create a Procfile so that Heroku knows how to run the project. Within this file add the following: web: gunicorn APP-NAME.wsgi Web tells Heroku to allow web traffic, whilst gunicorn is the server installed earlier, a web services gateway interface server (wsgi). This is a standard that allows Python services to integrate with web servers.
Now go to the 'Deploy' Tab on Heroku. Find the 'Deployment Method' section and choose GitHub. Connect to your GitHub account and find the repo you want to deploy.
Scroll down to the Automatic and Manual Deploys sections. Click 'Deploy Branch' in the Manual Deploy section and waited as Heroku installed all dependencies and deployed the code.
Once the project is finished deploying, click 'Open App' to see the newly deployed project.
Before deploying the final draft of your project you must:
- Remove DISABLE_COLLECTSTATIC=1 from congifvars within Heroku
- Ensure DEBUG is set to false in settings.py file
Local deployment:
- Log in to GitHub and locate the GitHub Repository
- Under the repository name, click "Clone or download".
- To clone the repository using HTTPS, under "Clone with HTTPS", copy the link.
- Open Git Bash
- Change the current working directory to the location where you want the cloned directory to be made.
- Type git clone, and then paste the URL you copied in Step 3.
- Press Enter. Your local clone will be created.
- Alternatively, if using Gitpod, you can click below to create your own workspace using this repository.
- Open in Gitpod
- You will need to also install all required packages in order to run this application on Heroku, refer to requirements.txt
- Command to install this apps requirements is pip3 install -r requirements.txt

Credits:

Content:

The Idea of README.md file and the codes used for the website were also learnt from Code Institute
Few codes were also learnt from Codemy.com
Few codes were taken from Stack Overflow

Acknowledgements:

My mentor who guided me througout the project.

code-institute-submissions / shahery-django-blog-project4_octresub Goto Github PK

shahery-django-blog-project4_octresub's Introduction