• Home
  • About
  • Contact

Blogger templates

facebook twitter instagram pinterest bloglovin Email

Programming Addict

We are suppose to develop fashion web site as our AF group project. i'm developing  the administrators part .
Administrator should be able to manage product categories and store managers admin should be able to add new store mangers. Once the admin creates a login for the store manager, it should be notified to the store manager via email.

so i started my part by first developing the front- end of the Manage categories section. we found a CSS template built with bootstrap and we integrated it in our project  this is how administrator page looks like 





i have created a component named Category to store Category Information 

import React from 'react'

function Category(props) {
    return (

        <tr>
            <th scope="row">{props.id}</th>
            <td>{props.name}</td>
            <td><button className="btn btn-primary btn-sm">
                <i className="fa fa-pencil" aria-hidden="true"></i>
                <span> Edit</span></button></td>
            <td><button className="btn btn-danger btn-sm">
                <i className="fa fa-trash" aria-hidden="true"></i>
                <span> Delete</span>
            </button></td>
        </tr>

    )
}

export default Category


then i created CategoriesList Component to store all Category Components in a table


import React from 'react'
import Categoty from '../../Components/Category/Category'
    
const CategoriesList = () =>{
    return (
        <table className="table">
            <thead>
                <tr>
                    <th scope="col">#</th>
                    <th colspan="3" scope="col">Name</th>
                </tr>
            </thead>
            <tbody>
                <Categoty id={1} name="Shoe" />
                <Categoty id={2} name="Dress"/>
                <Categoty id={3} name="Watch"/>
                <Categoty id={4} name="Beauty"/>
                
            </tbody>
        </table>
    )
}

export default CategoriesList

(for now i hard coded few categories but later ill change it get data from api)


and finally i added it to AdminPage Container

import React, { Component } from "react";
import CategoryList from "../../Layouts/CategoriesList/CategoriesList";
import StoreManagersList from "../../Layouts/StoreMangersList/StoreManagersList";
import RegisterNewStoreManager from "../../Layouts/RegisterNewStoreManager/RegisterNewStoreManager";
import Banner from "../../Components/Banner/Banner";

class AdminPage extends Component {
  render() {
    return (
      <div>
        <Banner
          name="Administrator"
          description="Manage Categories and Store Managers"
        />

        <div className="container pt-4">
          <h2 className="pt-4">Manage Categories</h2>
          <div className="row">
            <div className="col-sm ">
              <h4 className="pt-4 ">Product Categories</h4>
              <CategoryList />
            </div>
            <div className="col-sm">
              <h4 className="pt-4 ">Add New Categories</h4>
              <input
                type="text"
                className="form-control"
                id="name"
                placeholder="Category Name"
              />
              <br />
              <button className="button">Add</button>
            </div>
          </div>
   
      </div>
    );
  }
}

export default AdminPage;




Share
Tweet
Pin
Share
No comments

Enable Bootstrap in ReactJS

We all know that ReactJS is the most poplar javascript library that exists in web developing community. React makes it painless to create interactive UIs. Design simple views for each state in your application. Even if its not a javascript framework its really powerful. 

Bootstrap is the most popular HTML, CSS, and JavaScript framework for developing responsive web sites. it has many usefull css classes that we can use in our web apps. In this article we are going to look at how we can integrate bootstrap in our ReactJS web application to get the most out of thees two technologies to develop amazing , responsive and beautiful web apps without much pain.

In order to enable bootstrap on your react app first of all you have to install bootstrap using Node Package Manager(NPM) for this open the terminal and run the following code.

npm install react-bootstrap bootstrap
after you successfully install bootstrap you can import bootstrap to your project using import keyword.

import 'bootstrap/dist/css/bootstrap.min.css';



Share
Tweet
Pin
Share
No comments
Newer Posts
Older Posts

Search This Blog

recent posts

Blog Archive

  • March 2020 (2)
  • February 2020 (3)
Powered by Blogger.

Popular Posts

  • S.O.L.I.D the 5 principles every programmer should know S.O.L.I.D the 5 principles every programmer should know
  • no image Why you should know NodeJS
  • NoSQL vs SQL What is best NoSQL vs SQL What is best

About me

About Me

Ushan Fernando

ushansankalpafernando@gmail.com

Created with by ThemeXpose