mini proget angular and php: newsfeed manager.

if you want help, please contact us in our email:
mouhamed_ali_derwich@webi4u.com
if you want help, please contact us in our email:
mouhamed_ali_derwich@webi4u.com

Introduction:

With this guide, we will learn how to develop a newsfeed manager, using angular and php. Following this guide you will have how:

  • How to create an Angular form with validation.
  • How to submit an Angular form with multipar data.
  • How to save a form in database using php and MySql.
  • Using Angular routing system.
  • Using Angular Httpclient API.
prerequisites

to get started, you need to have the following skills:

  • HTML, CSS, BOOTSTRAP, JQUERY
  • Angular
  • PHP
  • MySql

1. Project Setup

our mini project consists of two parts, the Angular part, and the PHP part. let's start with the configuration of the angular part.

First we will create the angular proget using angular CLI:

ng new newsfeed

Next, we need to create five angular components for our proget:

ng generate component login
ng generate component register
ng generate component profile
ng generate component relation
ng generate component newsfeed-manager

We need to create our database on MySql. For this go to phpmyadmin to generate a new database name: [ form-wizard ] and create the USER table using the following SQL code.

-- phpMyAdmin SQL Dump
-- version 4.6.6deb5
-- https://www.phpmyadmin.net/
--
-- Client :  localhost:3306
-- Généré le :  Sam 24 Août 2019 à 08:59
-- Version du serveur :  5.7.25-1
-- Version de PHP :  7.2.15-0ubuntu3

SET SQL_MODE = "NO_AUTO_VALUE_ON_ZERO";
SET time_zone = "+00:00";


/*!40101 SET @OLD_CHARACTER_SET_CLIENT=@@CHARACTER_SET_CLIENT */;
/*!40101 SET @OLD_CHARACTER_SET_RESULTS=@@CHARACTER_SET_RESULTS */;
/*!40101 SET @OLD_COLLATION_CONNECTION=@@COLLATION_CONNECTION */;
/*!40101 SET NAMES utf8mb4 */;

--
-- Base de données :  `newsfeed`
--

-- --------------------------------------------------------

--
-- Structure de la table `comment`
--

CREATE TABLE `comment` (
  `id_comment` int(11) NOT NULL,
  `object` varchar(5000) NOT NULL,
  `date` varchar(100) NOT NULL,
  `id_user` int(11) NOT NULL,
  `id_publish` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Contenu de la table `comment`
--

INSERT INTO `comment` (`id_comment`, `object`, `date`, `id_user`, `id_publish`) VALUES
(6, 'jhjh', '$2019-08-22 09:42:58', 13, 13),
(7, 'ss sfsfs ezz', '2019-08-22 12:02:31', 13, 13),
(8, 'dgsd sdtsdtze ae', '2019-08-22 12:04:34', 13, 16),
(9, 'new comment', '2019-08-22 12:04:50', 13, 14),
(10, 'new comment', '2019-08-22 12:05:05', 13, 14),
(11, 'sdsdsda eaeaea', '2019-08-23 17:00:46', 17, 16);

-- --------------------------------------------------------

--
-- Structure de la table `publish`
--

CREATE TABLE `publish` (
  `id_publish` int(11) NOT NULL,
  `object` varchar(1000) NOT NULL,
  `image` varchar(1000) NOT NULL,
  `date` varchar(500) NOT NULL,
  `id_user` int(11) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Contenu de la table `publish`
--

INSERT INTO `publish` (`id_publish`, `object`, `image`, `date`, `id_user`) VALUES
(13, 'sycsus dysudd eaea', 'http://127.0.0.1/pexels-photo-371589.jpeg', '2019-08-22 09:41:23', 13),
(14, 'dsdsdsdsdsd', 'http://127.0.0.1/pexels-photo-371589.jpeg', '2019-08-22 10:10:06', 13),
(15, 'sdsfsfsfsfs', 'http://127.0.0.1/50878.jpg', '2019-08-22 11:34:40', 13),
(16, 'dhsssfgshfghsgfshgfs', 'http://127.0.0.1/pexels-photo-371589.jpeg', '2019-08-22 11:52:32', 13),
(17, 'dhduyueyuaeae', 'http://127.0.0.1/pexels-photo-371589.jpeg', '2019-08-23 17:01:02', 17);

-- --------------------------------------------------------

--
-- Structure de la table `user`
--

CREATE TABLE `user` (
  `id` int(11) NOT NULL,
  `firstname` varchar(100) NOT NULL,
  `lastname` varchar(100) NOT NULL,
  `job` varchar(100) NOT NULL,
  `email` varchar(100) NOT NULL,
  `username` varchar(100) NOT NULL,
  `password` varchar(100) NOT NULL,
  `userimg` varchar(500) NOT NULL,
  `coverimg` varchar(500) NOT NULL,
  `token` varchar(8000) NOT NULL
) ENGINE=InnoDB DEFAULT CHARSET=latin1;

--
-- Contenu de la table `user`
--

INSERT INTO `user` (`id`, `firstname`, `lastname`, `job`, `email`, `username`, `password`, `userimg`, `coverimg`, `token`) VALUES
(10, 'hxjhjhdsjd', 'sgdsdg', 'sgdsdg', 'fdfdfd@gma', 'dsd', 'sdsd', 'http://127.0.0.1/ronaldo.jpeg', 'http://127.0.0.1/pexels-photo-371589.jpeg', '061e808a115afb267ffdea5e74ce2803'),
(11, 'hxjhjhdsjd', 'sgdsdg', 'sgdsdg', 'fdfdfd@gma', 'dsd', 'sdsd', 'http://127.0.0.1/ronaldo.jpeg', 'http://127.0.0.1/pexels-photo-371589.jpeg', '061e808a115afb267ffdea5e74ce2803'),
(12, 'sdhsdyu', 'ysdysu', 'ysdysu', 'sdsd@gg', 'stdsyd', 'dsds', 'http://127.0.0.1/50878.jpg', 'http://127.0.0.1/pexels-photo-371589.jpeg', 'b1a46fb83e394f7495f18fa5f8b5eada'),
(13, 'hcxuyuycYU', 'DSDUSDYSUDY', 'DSDUSDYSUDY', 'SDYSUDY@mai', 'sudysud', 'sdysudyusd', 'http://127.0.0.1/ronaldo.jpeg', 'http://127.0.0.1/pexels-photo-371589.jpeg', '50f38a82e30cd9fc369333d83e638090'),
(14, '', '', '', '', '', '', 'http://127.0.0.1/', 'http://127.0.0.1/', 'd41d8cd98f00b204e9800998ecf8427e'),
(15, '', '', '', '', '', '', 'http://127.0.0.1/', 'http://127.0.0.1/', 'd41d8cd98f00b204e9800998ecf8427e'),
(16, 'mouhamed ali', 'derwich', 'derwich', 'med@gmail.fr', 'meddali', 'medmed', 'http://127.0.0.1/ronaldo.jpeg', 'http://127.0.0.1/pexels-photo-371589.jpeg', '5054b6341723317e2d55a01ab060e9e3'),
(17, 'dsdsd', 'sdsdd', 'sdsdd', 'sdsd@d', 'meddali', 'medmed', 'http://127.0.0.1/ronaldo.jpeg', 'http://127.0.0.1/50878.jpg', '2e7c61d1bae59c0c625b3809536c9a06');

--
-- Index pour les tables exportées
--

--
-- Index pour la table `comment`
--
ALTER TABLE `comment`
  ADD PRIMARY KEY (`id_comment`),
  ADD KEY `id_user` (`id_user`),
  ADD KEY `id_publish` (`id_publish`);

--
-- Index pour la table `publish`
--
ALTER TABLE `publish`
  ADD PRIMARY KEY (`id_publish`),
  ADD KEY `id_user` (`id_user`);

--
-- Index pour la table `user`
--
ALTER TABLE `user`
  ADD PRIMARY KEY (`id`);

--
-- AUTO_INCREMENT pour les tables exportées
--

--
-- AUTO_INCREMENT pour la table `comment`
--
ALTER TABLE `comment`
  MODIFY `id_comment` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=12;
--
-- AUTO_INCREMENT pour la table `publish`
--
ALTER TABLE `publish`
  MODIFY `id_publish` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=18;
--
-- AUTO_INCREMENT pour la table `user`
--
ALTER TABLE `user`
  MODIFY `id` int(11) NOT NULL AUTO_INCREMENT, AUTO_INCREMENT=18;
--
-- Contraintes pour les tables exportées
--

--
-- Contraintes pour la table `comment`
--
ALTER TABLE `comment`
  ADD CONSTRAINT `comment_ibfk_1` FOREIGN KEY (`id_user`) REFERENCES `user` (`id`),
  ADD CONSTRAINT `comment_ibfk_2` FOREIGN KEY (`id_publish`) REFERENCES `publish` (`id_publish`);

--
-- Contraintes pour la table `publish`
--
ALTER TABLE `publish`
  ADD CONSTRAINT `publish_ibfk_1` FOREIGN KEY (`id_user`) REFERENCES `user` (`id`);

/*!40101 SET CHARACTER_SET_CLIENT=@OLD_CHARACTER_SET_CLIENT */;
/*!40101 SET CHARACTER_SET_RESULTS=@OLD_CHARACTER_SET_RESULTS */;
/*!40101 SET COLLATION_CONNECTION=@OLD_COLLATION_CONNECTION */;