How to Create a Personal Blogging Website: Front-End (Angular) #2

 

Creating a personal blogging website with Django and Flask

Creating a personal blogging website with Django and Flask

First part: How to Create a Personal Blogging Website: Back-End (Flask/Python) #1

In this article, we are going to create the client-side part of the personal blogging website using Angular.

Before starting to code the front-end part, I want you to clone or download the starter code for the front-end. This starter code will contain HTML and CSS of all the components we are going to create in this article. Along with HTML and CSS, I have also provided routing for the application. This way, it’ll be easier for me to guide you through the article instead of asking you to add HTML and CSS at different stages of the application.

So go ahead, clone/download the starter code:

https://github.com/Bviveksingh/angular-starter

Requirements for the front-end:

  • Angular (I’m using angular 8 for this application)
  • A text editor (I’m using Visual Studio Code for this application)

Next, run the following command to install all the dependencies related to the application:


Now that we have installed all the dependencies for the application, let’s start writing some code.

Let’s add the functionality to the admin dashboard. For doing this, inside admin/admin.component.ts add the following code so that the component looks like this:


In the above code, we have created two functions named open_dialog and sign_out. The open_dialog function is called when the sign-out link is clicked.

Notice we imported AuthService in this component, and the AuthService implements the logout function. Since there is no code inside AuthService, the logout function will not be executed yet.

Next, we are going to create the add-blog page. Presently, when clicked on the Add Blog navigation link in the dashboard, this is how the add-blog page looks:

The add-blog page looks

The add-blog page looks

As one can see from the above image, there are input fields for title, feature image, and tags but, there is no input field for the content of the blog. We require an inline text-editor for the application so that the admin user can write the content of the blog inside the text-editor. There are a number of inline text-editors available online but the one I’ve used for the application is Syncfusion RichTextEditor.

For installing the text-editor run the following command:


Then, inside the imports array of the app.module.ts file, add RichTextEditorAllModule. Also, add the following import statement in app.module.ts:


Next, inside the <head> tag of the index.html file, add the following line:


Now that we’ve installed the inline text-editor, let’s add the editor inside the code, for doing this, inside admin/add-blog/add-blog.component.html, look for the div container named add-blog-input-content and inside the container, add the text-editor like this:


In the above code, we bound the value of the text-editor to the variable called content which we are going to define in the component.

Next, as one can see in the image above, we have provided an input to upload a feature image but, as seen in the first part of the blog, our back-end saves the feature image as a string in the database since we are going to use cloud storage to store the feature image.

In this application, I’m going to use Imgur to store feature images for the blog. For storing images in Imgur, follow the steps given below:

  1. Create an account at https://imgur.com/
  2. Register an application at https://api.imgur.com/oauth2/addclient? (While registering, select the Authorization Type as OAuth 2 authorization without callback URL)
  3. After registering an application, one will receive a Client ID. We will use this client id to send requests to the API.

Note- Remember that if one is using Imgur for a commercial purpose, then one needs to check the Imgur API since the method I have used here works for a non-commercial application.

Next, we are going to add all the HTTP requests to the Imgur API inside our feature-image service. For doing this, inside api-calls/feature-image.service.ts,
add the following code:


As one can notice in the above code, we have created a function called upload_image which takes a file as an argument and sends the HTTP request to the Imgur API with the client-id in the header of the request.

Note- Change the variable client_id in the above code, with the client_id you received after registering an application.

Now that we have completed setting up the input fields of the content blog and the feature image, let’s add the functionality inside the add-blog page.

Inside AddBlogComponent class of the admin/add-blog/add-blog.component.ts, add the following code:


Let’s breakdown the code,

The functions open_dialog and open_alert_dialog open a dialog box and an alert-dialog box respectively so that we provide a way for confirming the decisions and providing an acknowledgment for the admin user.

Next, the processFile function takes in the feature image selected by the user and stores it in the variable called selectedFile. Then, this function calls the previewImageLoad function which sets the preview_image which is useful in showing the user which feature image was selected.

Then comes the submit_blog function, which in turn calls the function inside the BlogService called add_blog with the arguments set as the blog properties.
Since we have not added the add_blog function inside BlogService, the editor will show an error. Therefore, let’s add the add_blog function inside BlogService.

Inside the BlogService class of api-calls/blog.service.ts, add the following code:


Note- In the above code, I’ve used localhost:5000 since that was the port number my flask server was running on. Change the port number to the port number your server is running on.

Next, let’s create the all-blogs page, the all-blogs page will look like this after completion:

All-blogs page

All-blogs page

 

As one can see, this page displays all the blogs that the admin created and provides options for editing and deleting the blog. We will only add the deleting functionality in this component since the editing/updating part will be handled by the update-blog page.

Inside admin/all-blogs/all-blogs.component.ts, add the following code:


The code above is pretty straight forward. The load_all_blogs functions load all the blogs using the get_all_blogs function of BlogService and the delete_single_blog function deletes the specific blog using the delete_blog function of BlogService.

Let’s add the delete_blog and get_all_blogs functions inside BlogService:


Next, for updating the blog, add the following code inside admin/update-blog/update-blog.component.ts:


Let’s breakdown the code, when the UpdateBlog component loads, the id present in the params is captured and stored in the blog_id variable. Then the get_blog_info function is called which loads all the information related to the blog with the specific blog_id. Other functions are similar to the ones used in add-blog.component.ts.

Note- Don’t forget to add the following code inside the update-blog-input-content container of the update-blog.component.html file:


The get_single_blog and update_blog functions in the above code need to be added inside BlogService:


Now that we have completed most of the CRUD operations the admin user can execute, let’s move onto building the homepage and the blog-details page.

After completion, the homepage will look like this:

Homepage

Homepage

 

On clicking any of the blogs, we’ll be redirected to the blog-details page which will show the complete blog. Let’s add functionality to the homepage first.

Inside homepage/homepage.component.ts, add the following code:


As seen in the code above, after the homepage component is initialized, the load_all_blogs function loads all the blogs written by the admin.

After completion, the blog-details page will look like this:

Blog-details page

Blog-details page

For adding functionality to the blog-details page, add the following code inside blog-details.component.ts:


We have completed most of the pages of the application but, there is one important feature that needs to be added. Since we created an admin user in the back-end, I want to protect the admin routes in the front-end(add-blog, update-blog and, delete-blog). For protecting the routes, we are going to create a login page and the admin user needs to login with the email and password created in the back-end. Only if the user is logged in as admin, he/she can create/update/delete a blog.

For adding login functionality, the following code needs to be added inside login/login.component.ts:


In the above code, the submit_form function executes the login function from AuthService which returns a token after logging in. The token received, is then stored as auth_token in the localStorage of the client-side.

We are storing the auth_token in the localStorage so that the CRUD requests to the back-end can be sent with auth_token in the header of the request.

We have not added the login function in AuthService, so let’s add the login function. Along with the login function, I’m adding the logout function and is_logged_in function as well.

Add the following code inside auth.service.ts:


logout function removes the auth_token from the localStorage and whereas, the is_logged_in function checks whether the auth_token is available and if the auth_token is available, checks whether the token is expired or not and returns a boolean.

For the above code to run, you have to install auth0/angular-jwt:


Also, inside the imports array of app.module.ts, add the following code:


By adding the above code, all the HTTP requests will now be sent with the auth_token in the header. This way, the admin user can perform CRUD operations.

Note- Don’t forget to import JwtModule from auth0/angular-jwt inside app.module.ts.

Finally, we need to create a Guard service that will redirect the user to the login page if the user is trying to access the admin routes without being logged in.
For doing this, add the following code inside auth-guard.service.ts:


Also, inside the routes array of the app-routing.module.ts, add the canActivate property to the admin path so that the admin path looks like this:


There you go, we have created the front-end part of the blogging website. Run the flask and angular servers to see the magic.

You can clone the GitHub repo of the complete code from:

https://github.com/Bviveksingh/angular-frontend

About the author

Stay Informed

It's important to keep up
with industry - subscribe!

Stay Informed

Looks good!
Please enter the correct name.
Please enter the correct email.
Looks good!

Related articles

18.03.2020

Filtering, Sorting and Pagination – Advanced Filtering with React and Redux

With static sites becoming more common, the need for filtering, sorting, and pagination on the frontend alone has never been more apparent. With ...

13.03.2020

Getting Started with React Native in 2020

This post is going to be about giving you a quick start if you are interested in learning and developing mobile apps using React Native. Few fair ...

Create simple POS with React, Node and MongoDB #5: Setup ReCaptcha and define CORS

In this chapter, we will continue from our previous chapters by discussing how to setup ReCaptcha and set up CORS. After publishing our backend and ...

2 comments

Saurabh Thakur March 5, 2020 at 1:40 pm
-1

 how to create new function to get adminrole.

 
Vivek Bisht March 5, 2020 at 7:45 pm
1

 Though your question is not clear enough, I suppose you want role-based authorization for the application. I would suggest you add role-based authorization in the back-end of the app (In this case, I have used Flask as back-end). In Flask, there is a library called Flask-User, which is quite easy to set up and gives you the feature of adding role-based authorization to the app. I suggest you go through the docs of that.

Sign in

Forgot password?

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy

Password recovery

You can also try to

Or use a social network account

 

By Signing In \ Signing Up, you agree to our privacy policy