Unknown Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (home page service section angular 8 project ) Part 16 | My Project HD
X

Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (home page service section angular 8 project ) Part 16

Angular Projects For Beginners With Laravel | Hotel Management System project with angular 8 and Laravel (home page service section angular 8 project ) Part 16






Send Project Report Request


We had made the Service block in our previous angular laravel  project tutorial, in this angular project tutorial we will create a contact section at home page.in contact section we will create two block 

  • Google Map Section 
  • Contact Form 

To create Contact Section on Home Page you must open the following file

  1. HomeConponent.htm

 

HomeComponent.html 

<div class="container">

  <div class="row mt-4">
      <div class="col-sm-6">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3667.7553145456345!2d75.7629231144451!3d23.179128916276408!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x396375255b13bac9%3A0xb240786696dde6ed!2smy%20project%20hd!5e0!3m2!1sen!2sin!4v1587295364997!5m2!1sen!2sin" width="500" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
      </div>
      <div class="col-sm-6">
        <div class="row">
          <div class="col-sm-12">
            <h4 class="text-center">Contect Form</h4>
          </div>
          <div class="col-sm-12">
            <div class="form-group">
              <label>Enter Name</label>
              <input type="text"  class="form-control">
            </div>
            <div class="form-group">
              <label>Enter E-Mail</label>
              <input type="text"  class="form-control">
            </div>
            <div class="form-group">
              <label>Enter Mobile No</label>
              <input type="text"  class="form-control">
            </div>
            <div class="form-group">
              <label>Enter Message</label>
              <textarea  class="form-control"></textarea>
            </div>
            <div class="form-group">
              <button class="btn btn-info">Send</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

The process of integrating the Google Map to Angular project is described in the video.

HomeComponent.html Complete Code

<div id="demo" class="carousel slide" data-ride="carousel">

    <!-- Indicators -->
    <ul class="carousel-indicators">
      <li data-target="#demo" data-slide-to="0" class="active"></li>
      <li data-target="#demo" data-slide-to="1"></li>
      <li data-target="#demo" data-slide-to="2"></li>
    </ul>
    
    <!-- The slideshow -->
    <div class="carousel-inner">
      <div class="carousel-item active">
        <img class="slider_img" src="{{ base_url }}public/images/slider/slide1.jpeg" alt="Slide 1" >
      </div>
      <div class="carousel-item">
        <img class="slider_img" src="{{ base_url }}public/images/slider/slide2.jpg" alt="Slide 2" >
      </div>
      <div class="carousel-item">
        <img class="slider_img" src="{{ base_url }}public/images/slider/slide3.jpeg" alt="Slide 3" >
      </div>
    </div>
    
    <!-- Left and right controls -->
    <a class="carousel-control-prev" href="#demo" data-slide="prev">
      <span class="carousel-control-prev-icon"></span>
    </a>
    <a class="carousel-control-next" href="#demo" data-slide="next">
      <span class="carousel-control-next-icon"></span>
    </a>
  </div>
  <div class="container">
  <div class="row mt-4">
    <div class="col-3">
      <div class="service_block">
        <div class="service_image">
          <img src="https://via.placeholder.com/50" alt="image">
        </div>
        <div class="service_title">
          <h5>Service Name 1</h5>
        </div>
        <div class="service_description">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
        </div>
      </div>
    </div>
    <div class="col-1"></div>
    <div class="col-3">
      <div class="service_block">
        <div class="service_image">
          <img src="https://via.placeholder.com/50" alt="image">
        </div>
        <div class="service_title">
          <h5>Service Name 1</h5>
        </div>
        <div class="service_description">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
        </div>
      </div>
    </div>
    <div class="col-1"></div>
    <div class="col-3">
      <div class="service_block">
        <div class="service_image">
          <img src="https://via.placeholder.com/50" alt="image">
        </div>
        <div class="service_title">
          <h5>Service Name 1</h5>
        </div>
        <div class="service_description">
          <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum</p>
        </div>
      </div>
    </div>
  </div>
   
    <div class="row mt-4">
      <div class="col-sm-6">
        <iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d3667.7553145456345!2d75.7629231144451!3d23.179128916276408!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x396375255b13bac9%3A0xb240786696dde6ed!2smy%20project%20hd!5e0!3m2!1sen!2sin!4v1587295364997!5m2!1sen!2sin" width="500" height="450" frameborder="0" style="border:0;" allowfullscreen="" aria-hidden="false" tabindex="0"></iframe>
      </div>
      <div class="col-sm-6">
        <div class="row">
          <div class="col-sm-12">
            <h4 class="text-center">Contect Form</h4>
          </div>
          <div class="col-sm-12">
            <div class="form-group">
              <label>Enter Name</label>
              <input type="text"  class="form-control">
            </div>
            <div class="form-group">
              <label>Enter E-Mail</label>
              <input type="text"  class="form-control">
            </div>
            <div class="form-group">
              <label>Enter Mobile No</label>
              <input type="text"  class="form-control">
            </div>
            <div class="form-group">
              <label>Enter Message</label>
              <textarea  class="form-control"></textarea>
            </div>
            <div class="form-group">
              <button class="btn btn-info">Send</button>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>

After use this step you can use ng server command for run your angular project

 

 

More Tutorials

Web Technology Tutorials in Hindi

Web Technology Tutorials in Hindi

Read More
Diploma engineering tutorial for polytechnic collage

Diploma Engineering Tutorial

Read More
Final Year Projects for Computer Science with Source Code

Final Year Projects for Computer Science with Source Code

Read More