I just put contact form in HTML one page site, but after I add contact code to HTML index file, when I open my site my page loads not on top banner, logo etc., but on contact form.
<!-- contact pradzia -->
<form id="contact" action="" method="post">
<fieldset>
<input placeholder="Jūsų vardas" type="text" tabindex="1" required autofocus>
</fieldset>
<fieldset>
<input placeholder="Jūsų el. pašto adresas" type="email" tabindex="2" required>
</fieldset>
<fieldset>
<input placeholder="Jūsų tel. nr." type="tel" tabindex="3" required>
</fieldset>
<fieldset>
<input placeholder="Tema" type="url" tabindex="4" required>
</fieldset>
<fieldset>
<textarea placeholder="Rašykite žinute čia..." tabindex="5" required></textarea>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Siųsti</button>
</fieldset>
</form>
<!-- contact pabaiga -->
</div>
<?php
require __DIR__ . '/../app/src/app.php';
?>
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gintaro drožyba</title>
<link href="css/bootstrap.min.css" rel="stylesheet">
<link href="css/custom.css" rel="stylesheet">
<link rel="shortcut icon" type="image/png" href="images/favicon.png"/> <!-- ikonele -->
</head>
<body>
<!-- Navigacija -->
<nav class="navbar navbar-default navbar-fixed-top" role="navigation">
<div class="container">
<!-- Logo ir responsive toggle -->
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navbar">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">
<span class="glyphicon glyphicon-fire"></span>
Gintaro drožyba
</a>
</div>
<!-- Navbar linkai -->
<div class="collapse navbar-collapse" id="navbar">
<ul class="nav navbar-nav navbar-right">
<li class="active">
Pagrindinis
</li>
<li>
Galerija
</li>
<li class="dropdown">
Darbai <span class="caret"></span>
<ul class="dropdown-menu" aria-labelledby="about-us">
<li>Paveikslai</li>
<li>Skulptūros</li>
<li>Baldai</li>
<li>Suvenyrai</li>
<li>Kita</li>
</ul>
</li>
</ul>
</div><!-- /.navbar-collapse -->
</div><!-- /.container -->
</nav>
<!-- baneris -->
<div class="jumbotron feature">
<div class="container">
<h1><span class="glyphicon glyphicon-equalizer"></span> Gintaro Černiaus drožyba</h1>
<p>Medžio darbai, drožyba, mediniai baldai, paveikslai, skulptūros</p>
<p><a class="btn btn-primary" href="#">Plačiau</a></p>
</div>
</div>
<!-- heading -->
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 class="text-center">Ilgametė patirtis</h1>
<p class="lead text-center">Kažkokia informacija. Pasirinkite:</p>
</div>
</div>
</div>
<!-- darbai -->
<div class="container-fluid">
<div class="row promo">
<a href="#">
<div class="col-md-4 promo-item item-1">
<h3>
Galerija
</h3>
</div>
</a>
<a href="#">
<div class="col-md-4 promo-item item-2">
<h3>
Kontaktai
</h3>
</div>
</a>
<a href="#">
<div class="col-md-4 promo-item item-3">
<h3>
Užsakymas
</h3>
</div>
</a>
</div>
</div><!-- /.container-fluid -->
<!-- parduodami darbai -->
<div class="container">
<h1 class="text-center">Padaryti darbai pardavimui</h1>
<div class="row">
<!-- darbas 1 -->
<div class="col-sm-6 col-md-3">
<div class="thumbnail featured-product">
<a href="#">
<img src="images/foto1.jpg" alt="">
</a>
<div class="caption">
<h3>Paveikslas</h3>
<p>Kažkoks tekstas</p>
<p class="price">95.99 EUR</p>
<!-- mygtukas bootstrap -->
<div class="input-group">
<input type="number" class="form-control" value="1">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">
<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
Pridėti į krepšelį
</button>
</span>
</div>
</div>
</div>
</div>
<!-- darbas 2 -->
<div class="col-sm-6 col-md-3">
<div class="thumbnail featured-product">
<a href="#">
<img src="images/foto2.jpg" alt="">
</a>
<div class="caption">
<h3>Paveikslas 2</h3>
<p>Kažkoks tekstas</p>
<p class="price"><s>85.95 EUR</s>65.95 EUR</p>
<!-- mygtukas bootstrap -->
<div class="input-group">
<input type="number" class="form-control" value="1">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">
<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
Pridėti į krepšelį
</button>
</span>
</div>
</div>
</div>
</div>
<!-- darbas 3 -->
<div class="col-sm-6 col-md-3">
<div class="thumbnail featured-product">
<a href="#">
<img src="images/foto3.jpg" alt="">
</a>
<div class="caption">
<h3>Paveikslas 3</h3>
<p>Kažkoks tekstas</p>
<p class="price">145.99 EUR</p>
<!-- mygtukas bootstrap -->
<div class="input-group">
<input type="number" class="form-control" value="1">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">
<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
Pridėti į krepšelį
</button>
</span>
</div>
</div>
</div>
</div>
<!-- darbas 4 -->
<div class="col-sm-6 col-md-3">
<div class="thumbnail featured-product">
<a href="#">
<img src="images/foto3.jpg" alt="">
</a>
<div class="caption">
<h3>Paveikslas 3</h3>
<p>Kažkoks tekstas</p>
<p class="price">199.99 EUR</p>
<!-- mygtukas bootstrap -->
<div class="input-group">
<input type="number" class="form-control" value="1">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">
<span class="glyphicon glyphicon-shopping-cart" aria-hidden="true"></span>
Pridėti į krepšelį
</button>
</span>
</div>
</div>
</div>
</div>
</div>
</div><!-- /.container -->
<div class="container text-center">
<div class="container">
<h1>Apie mane</h1>
<p class="lead">
Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum</p>
</div>
<img class="img-responsive img-circle center-block" src="images/service.jpg" alt="">
</div><!--/.container-->
<!-- contact pradzia -->
<form id="contact" action="" method="post">
<fieldset>
<input placeholder="Jūsų vardas" type="text" tabindex="1" required autofocus>
</fieldset>
<fieldset>
<input placeholder="Jūsų el. pašto adresas" type="email" tabindex="2" required>
</fieldset>
<fieldset>
<input placeholder="Jūsų tel. nr." type="tel" tabindex="3" required>
</fieldset>
<fieldset>
<input placeholder="Tema" type="url" tabindex="4" required>
</fieldset>
<fieldset>
<textarea placeholder="Rašykite žinute čia..." tabindex="5" required></textarea>
</fieldset>
<fieldset>
<button name="submit" type="submit" id="contact-submit" data-submit="...Sending">Siųsti</button>
</fieldset>
</form>
<!-- contact pabaiga -->
<!-- footeris -->
<footer>
<h1 class="text-center">Mane rasite</h1>
<!-- Map -->
<script id="map" src='https://maps.googleapis.com/maps/api/js?v=3.exp&key=AIzaSyA4G64jXEiyPLOA1XKXDkvl901-khuxrao'></script><div style='overflow:hidden;height:423px;width:1401px;'><div id='gmap_canvas' style='height:423px;width:1401px;'></div><style>#gmap_canvas img{max-width:none!important;background:none!important}</style></div> <a href='https://embedmaps.net'>add google map</a> <script type='text/javascript' src='https://embedmaps.com/google-maps-authorization/script.js?id=0884e686c4548d57daed57d5f4148e6ad91ea399'></script><script type='text/javascript'>function init_map(){var myOptions = {zoom:17,center:new google.maps.LatLng(55.3386064,26.155018400000017),mapTypeId: google.maps.MapTypeId.SATELLITE};map = new google.maps.Map(document.getElementById('gmap_canvas'), myOptions);marker = new google.maps.Marker({map: map,position: new google.maps.LatLng(55.3386064,26.155018400000017)});infowindow = new google.maps.InfoWindow({content:'<strong>Mane rasite</strong><br>Turistų g. 20<br>30136 Ignalina<br>'});google.maps.event.addListener(marker, 'click', function(){infowindow.open(map,marker);});infowindow.open(map,marker);}google.maps.event.addDomListener(window, 'load', init_map);</script>
<div class="container">
<div class="row">
<div class="col-sm-12 footer-info-item text-center">
<h2>Susisiekite</h2>
<p class="lead"><span class="glyphicon glyphicon-phone-alt"></span> +370 672 07463</p>
<p class="lead"><span class="glyphicon glyphicon-envelope"></span> drozyba#gmail.com</p>
</div>
</div>
</div>
<!-- Footer Links -->
<div class="footer-info">
<div class="container">
<div class="row">
<div class="col-sm-4 footer-info-item">
<h3>Informacija</h3>
<ul class="list-unstyled">
<li>Apie mane</li>
<li>Galerija</li>
<li>Kontaktai</li>
<li>Paslaugos</li>
</ul>
</div>
<div class="col-sm-4 footer-info-item">
<h3>My Account</h3>
<ul class="list-unstyled">
<li>Sign In</li>
<li>View Cart</li>
<li>My Wishlist</li>
<li>Track My Order</li>
<li>Help</li>
</ul>
</div>
<div class="col-sm-4 footer-info-item">
<h3><span class="glyphicon glyphicon-list-alt"></span> Newsletter</h3>
<p>Sign up for exclusive offers.</p>
<div class="input-group">
<input type="email" class="form-control" placeholder="Enter your email address">
<span class="input-group-btn">
<button class="btn btn-primary" type="button">
Subscribe!
</button>
</span>
</div>
</div>
</div><!-- /.row -->
</div><!-- /.container -->
</div>
<!-- Copyright -->
<div class="small-print">
<div class="container">
<p>Copyright © drozyba.lt 2017 </p>
</div>
</div>
</footer>
<!-- jQuery pirmas :) -->
<script src="js/jquery-3.2.1.min.js"></script>
<!-- Bootstrapo JavaScript -->
<script src="js/bootstrap.min.js"></script>
<!-- IE10 viewport failas -->
<script src="js/ie10-viewport-bug-workaround.js"></script>
</body>
</html>
Try to remove the autofocus attribute form your first input (:
Related
I have used $row variable that contains database information and I want to repeat the div element with class
"col-md-3 col-sm-6" to repeat it self until the end of array.
I just want that every products details like product's image, name and price
should be display in one line and after 4 products it should display on the next line
<?php
$con = mysqli_connect("localhost","root","","grocerystore");
$sql = "SELECT * FROM main_products";
$result = mysqli_query($con,$sql);
session_start();
?>
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/css/bootstrap.min.css">
<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<!-- Latest compiled JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.4.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css">
<title>Instamart Grocery Store</title>
</head>
<body>
<div class="navbar navbar-inverse">
<div class="container">
<div class="navbar-header">
Instamart Grocery
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="myNavbar"></button>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<ul class="nav navbar-nav navbar-right">
<!-- <li><span class="glyphicon glyphicon-log-in"></span> setting</li>
<li><span class="glyphicon glyphicon-log-in"></span> logout</li> -->
<li>
<div class="dropdown">
<button class="dropbtn"><span class="glyphicon glyphicon-user"></button>
<div class="dropdown-content">
<center>
<h4>
<?php echo $_SESSION['user_name'];?>
</h4>
</center>
Your Orders
Log-out
Change password
Your cart
</div>
</div>
</li>
</ul>
</div>
</div>
<div class="container">
<div class="jumbotron">
<h1>Let's be Healty together</h1>
<p>We have best choises of all products</p>
</div>
<div class="row">
<div class="col-md-3 col-sm-6">
<!-- <div class="thumbnail"> -->
<div class="caption">
<a href="dairy.php">
<h3><button class="btn btn-primary btn-block">Dairy Products</button></h3>
</a>
</div>
<!-- </div> -->
</div>
<div class="col-md-3 col-sm-6">
<!-- <div class="thumbnail"> -->
<div class="caption">
<div class="caption">
<h3 class="temp"><button class="btn btn-primary btn-block">Fresh Vegetable</button></h3>
</div>
</div>
<!-- </div> -->
</div>
<div class="col-md-3 col-sm-6">
<!-- <div class="thumbnail"> -->
<div class="caption">
<div class="caption">
<h3><button class="btn btn-primary btn-block">Fresh Fruits</button></h3>
</div>
</div>
<!-- </div> -->
</div>
<div class="col-md-3 col-sm-6">
<!-- <div class="thumbnail"> -->
<div class="caption">
<div class="caption">
<h3><button class="btn btn-primary btn-block">Daily Needs</button></h3>
</div>
</div>
<!-- </div> -->
</div>
</div>
</div>
<div class="container">
<div class="row row1">
<?php while($row = mysqli_fetch_array($result))
{
$image = $row['img_dir'];
?>
<div class="col-md-3 col-sm-6">
<div class="thumbnail">
<?php echo"<img src='{$image}'>";?>
<div>
<h3>
<?php echo $row['product_name'];?>
</h3>
<p>Price:
<?php echo $row['price'];?>
</p>
<a href="cart.php">
<button" class="btn btn-primary btn-block">Add to cart</button>
</a>
</div>
</div>
</div>
<?php } ?>
</div>
</div>
</body>
</html>
the images are displaying like this
How do I send HTML email so that it will look nice with Bootstrap 4? When I send mail it looks nice, but when receiver gets it it looks bad.
here's code:
https://jsfiddle.net/bluemilkyh/6m4v9pnf/1/
I'd also like to make footer form (it's about news subscription) when they fill the form and press the button it would save to my database (I have database already which is not localhost...).
code:
<!DOCTYPE html>
<html>
<head>
<title>Stanovanja Fink</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.7.0/css/all.css" integrity="sha384-lZN37f5QGtY3VHgisS14W3ExzMWZxybE1SJSEsQp9S+oqd12jhcu+A56Ebc1zFSJ" crossorigin="anonymous">
</head>
<!-- navbar -->
<nav class="navbar navbar-expand-lg navbar-light bg-light">
<a class="navbar-brand" href="http://localhost/stanovanjefink/index.php">Stanovanja Fink</a>
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav mr-auto">
<li class="nav-item">
<a class="nav-link" href="http://localhost/stanovanjefink/stanovanjeanja.php">Stanovanje Anja</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/stanovanjefink/stanovanjealjaz.php">Stanovanje Aljaž</a>
</li>
<li class="nav-item">
<a class="nav-link" href="http://localhost/stanovanjefink/kontakt.php">Kontakt</a>
</li>
</ul>
</form>
</div>
</nav>
<hr>
<body>
<div class="p-3 mb-2 bg-light text-dark container text-center d-flex flex-column align-items-center">
<h2 form-inline justify-content-center>Rezervacija Stanovanje Aljaz</h2>
<br>
<br>
<label ><b>Ime: </b></label>
<input type="text" class=" form-control col-sm-6 " disabled value="" >
<label><b>Priimek: </b></label>
<input type="text" class="form-control col-sm-6 " disabled value="" ><label><b>Telefon: </b></label>
<input type="text" class="form-control col-sm-6" disabled value="">
<label><b>E-mail: </b></label>
<input type="text" class="form-control col-sm-6" disabled value="">
<label><b>Prihod: </b></label>
<input type="text" class="form-control col-sm-6" disabled value="">
<label><b>Odhod: </b></label>
<input type="text" class="form-control col-sm-6" disabled value="">
<label><b>Cena: </b></label>
<input type="text" class="form-control col-sm-6" disabled value="">
<br>
<h3>Informacije </h3>
<p><i class="gdlr-icon fa fa-map-marker"></i><b> Lokacija:</b> Pod Lipovim trotom</p>
<p><i class="gdlr-icon fa fa-phone"></i> <b>Telefon:</b> +36 41 8813 49219 </p>
<p><i class="gdlr-icon fa fa-envelope"></i> <b>Email :</b> +36 41 88213 49912 </p>
<br>
</div>
</body>
<footer class="bg-dark text-center">
<div class="container p-4">
<form action="kontakt.php">
<div class="row d-flex justify-content-center">
<div class="col-auto">
<p class="pt-2" style="color:white;">
<b>Naroci se na novice: </b>
</p>
</div>
<div class="col-md-5 col-12">
<div class="form-outline form-white mb-4">
<input type="email" placeholder="email" name="novice" class="form-control" required>
</div>
</div>
<div class="col-auto">
<button type="submit" class="btn btn-outline-light mb-4">
Narocite se
</button>
</div>
</div>
<section class="mb-4">
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
><i class="fab fa-facebook-f"></i
></a>
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
><i class="fab fa-twitter"></i
></a>
<a class="btn btn-outline-light btn-floating m-1" href="#!" role="button"
><i class="fab fa-instagram"></i></a>
</section>
</form>
</div>
<div class="text-center p-3" style="background-color:black; color:gray;">
© 2020 Stanovanja Fink
</div>
</div>
</footer>`
I am guessing you are using bootstrap. Use bootstrap for e-mail instead. Web frameworks will NOT play nicely with e-mail. HTML e-mail have different rules and best practices on how to develop markup for it, than classic web sites.
Possibly related:
Look for the top answer here to get a general idea about developing for e-mail: CSS Email Template at Outlook does not display correctly
Here for basic layout: How to make a fluid width email with a max width
I have a navigation toggle it appears when screen is small after i included 1 php file which which is bootstrap modal, after including that my navigation toggle is not closing after opening.Im unable to close the navigation menu.
I have include both the files index as well as request which is data modal file
<?php require 'request.php';?>
<header class="navigation navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!-- responsive nav button -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- /responsive nav button -->
<!-- logo -->
<a class="navbar-brand logo" href="index.html">
<img class="logo-white" src="images/logo1.png" alt="logo" style="width:40px;float:left;"/>
<p class="logo-white" style="float:right;font-size: 30px;color: white;font-family: initial;margin-top:5px;margin-left:8px;">Expert Web Solutions</p>
<img class="logo-default" src="images/logo2.png" alt="logo" style="width:40px;float:left;"/>
<p class="logo-default" style="float:right;font-size: 30px;color: #000;font-family: initial;margin-top:5px;margin-left:8px;">Expert Web Solutions</p>
</a>
<!-- /logo -->
</div>
<!-- main nav -->
<nav class="collapse navbar-collapse navbar-right">
<ul id="nav" class="nav navbar-nav menu">
<li>
<a href="index.html" >Home </span></a>
</li>
<li class="dropdown">
Services <span class="caret"></span>
<ul class="dropdown-menu">
<li>Mobile App Development</li>
<li>Web Development</li>
<li>Software Development</li>
<li>Software Consultancy</li>
<li>Software Testing and<br> Quality Assurance</li>
</ul>
</li>
<li>Technologies</li>
<li>About Us</li>
<li>Careers</li>
<li><button type="button" data-toggle="modal" data-target="#myModal">Request A Quote</button></li>
<li>Contact Us</li>
</li>
</ul>
</nav>
<!-- /main nav -->
</div>
</header>
<this is request.php>
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="form.css" >
<script src="form.js"></script>
</head>
<body>
<div class="container">
<!-- Trigger the modal with a button -->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Request A Quote</h4>
</div>
<div class="panel-body">
<form id="reused_form">
<div class="form-group">
<input type="text" name="name" required class="form-control" placeholder="Enter Name">
</div>
<div class="form-group">
<input type="email" name="email" required class="form-control" placeholder="Enter Email">
</div>
<div class="form-group">
<input name="phone" class="form-control" placeholder="Enter Phone Number">
</div>
<div class="form-group">
<textarea rows="3" name="message" class="form-control" placeholder="Write Your Requirements"></textarea>
</div>
<div class="form-group">
<button class="btn btn-raised btn-lg btn-warning" type="submit" style="
border: none;
padding: 15px 0;
width: 100%;
margin: 0;
background: #2b315d;
color: #fff;
border-radius: 0;
">Send</button>
</div>
</form>
<div id="error_message" style="width:100%; height:100%; display:none; ">
<h4>
Error
</h4>
Sorry there was an error sending your form.
</div>
<div id="success_message" style="width:100%; height:100%; display:none; ">
<h2 style="color:#000; font-size:22px;text-align:center;">Thank You! <br>Your Message was Sent Successfully.<br>One of our representatives will contact you shortly.</h2>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
I think require.php breaks the html including head section again and opening and closing html and body tags.
Maybe this will work ?
<!DOCTYPE html>
<html lang="en">
<head>
<title>Bootstrap Example</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<link rel="stylesheet" href="form.css" >
<script src="form.js"></script>
</head>
<body>
<header class="navigation navbar navbar-fixed-top">
<div class="container">
<div class="navbar-header">
<!-- responsive nav button -->
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-collapse">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<!-- /responsive nav button -->
<!-- logo -->
<a class="navbar-brand logo" href="index.html">
<img class="logo-white" src="images/logo1.png" alt="logo" style="width:40px;float:left;"/>
<p class="logo-white" style="float:right;font-size: 30px;color: white;font-family: initial;margin-top:5px;margin-left:8px;">Expert Web Solutions</p>
<img class="logo-default" src="images/logo2.png" alt="logo" style="width:40px;float:left;"/>
<p class="logo-default" style="float:right;font-size: 30px;color: #000;font-family: initial;margin-top:5px;margin-left:8px;">Expert Web Solutions</p>
</a>
<!-- /logo -->
</div>
<!-- main nav -->
<nav class="collapse navbar-collapse navbar-right">
<ul id="nav" class="nav navbar-nav menu">
<li>
<a href="index.html" >Home </span></a>
</li>
<li class="dropdown">
Services <span class="caret"></span>
<ul class="dropdown-menu">
<li>Mobile App Development</li>
<li>Web Development</li>
<li>Software Development</li>
<li>Software Consultancy</li>
<li>Software Testing and<br> Quality Assurance</li>
</ul>
</li>
<li>Technologies</li>
<li>About Us</li>
<li>Careers</li>
<li><button type="button" data-toggle="modal" data-target="#myModal">Request A Quote</button></li>
<li>Contact Us</li>
</li>
</ul>
</nav>
<!-- /main nav -->
</div>
</header>
<?php require 'request.php';?>
</body>
</html>
below request PHP
<!-- Trigger the modal with a button -->
<!-- Modal -->
<div class="modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Request A Quote</h4>
</div>
<div class="panel-body">
<form id="reused_form">
<div class="form-group">
<input type="text" name="name" required class="form-control" placeholder="Enter Name">
</div>
<div class="form-group">
<input type="email" name="email" required class="form-control" placeholder="Enter Email">
</div>
<div class="form-group">
<input name="phone" class="form-control" placeholder="Enter Phone Number">
</div>
<div class="form-group">
<textarea rows="3" name="message" class="form-control" placeholder="Write Your Requirements"></textarea>
</div>
<div class="form-group">
<button class="btn btn-raised btn-lg btn-warning" type="submit" style="
border: none;
padding: 15px 0;
width: 100%;
margin: 0;
background: #2b315d;
color: #fff;
border-radius: 0;
">Send</button>
</div>
</form>
<div id="error_message" style="width:100%; height:100%; display:none; ">
<h4>
Error
</h4>
Sorry there was an error sending your form.
</div>
<div id="success_message" style="width:100%; height:100%; display:none; ">
<h2 style="color:#000; font-size:22px;text-align:center;">Thank You! <br>Your Message was Sent Successfully.<br>One of our representatives will contact you shortly.</h2>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
I'm trying to create a profile page with blanks like username, city etc. I have successfully stored username & city in the MySQL Database using the UPDATE query. I have set the WHERE condition according to the email of the users. I have made 2 accounts with separates emails, for testing purposes. When I logged in from account #1, entered username & id, it was successfully stored in the correct row. Then I logged out, and logged in from account #2, and the username & city I entered in account #1 was duplicated and printed on blanks of account #2. BUT in database, the data was still distinguished until I pressed ENTER. So my question is, why is this happening and how do I fix this?
Action.php:
<?php
session_start(); //---> start session
ini_set('display_errors', 1); ini_set('log_errors',1); error_reporting(E_ALL); mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
$con = mysqli_connect('localhost', 'id1753243_venom', 'roushan123', 'id1753243_gameware_01');
if(!$con)
{
echo 'Not connected to the server';
}
$city = $_SESSION['city'];
$city = $_POST['city'];
if(isset($_POST['username']))
if(isset($_POST['city']))
{
$username = $_POST['username'];
$sql = "UPDATE users SET username='".mysqli_real_escape_string($con,$username)."', city = '$city' WHERE email='".mysqli_real_escape_string($con,$_SESSION['email'])."'";
$insert = mysqli_query($con,$sql);
$_SESSION['username'] = $username; //---> this will store username into session variable
$_SESSION['city'] = $city; //---> this will store city into session variable
}
if(!$insert)
{
echo 'Not inserted';
}
else
{
echo 'Inserted';
}
header("refresh:2; url=user.php");
?>
And this is the user.php:
<?php
ini_set('display_errors', 1); ini_set('log_errors',1); error_reporting(E_ALL); mysqli_report(MYSQLI_REPORT_ERROR | MYSQLI_REPORT_STRICT);
/* Displays user information and some useful messages */
session_start();
include 'db.php';
// Check if user is logged in using the session variable
if ( $_SESSION['logged_in'] != 1 ) {
$_SESSION['message'] = "You must log in before viewing your profile page!";
header("location: error.php");
}
else {
// Makes it easier to read
$first_name = $_SESSION['first_name'];
$last_name = $_SESSION['last_name'];
$email = $_SESSION['email'];
$active = $_SESSION['active'];
$username = $_SESSION['username'];
$city = $_SESSION['city'];
}
?>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="icon" type="image/png" href="assets/img/favicon.ico">
<title>Social Junction | User Profile</title>
<meta content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' name='viewport' />
<meta name="viewport" content="width=device-width" />
<!-- Bootstrap core CSS -->
<link href="assets/css/bootstrap.min.css" rel="stylesheet" />
<!-- Animation library for notifications -->
<link href="assets/css/animate.min.css" rel="stylesheet"/>
<!-- Light Bootstrap Table core CSS -->
<link href="assets/css/light-bootstrap-dashboard.css" rel="stylesheet"/>
<!-- CSS for Demo Purpose, don't include it in your project -->
<link href="assets/css/demo.css" rel="stylesheet" />
<!-- Fonts and icons -->
<link href="//maxcdn.bootstrapcdn.com/font-awesome/4.2.0/css/font-awesome.min.css" rel="stylesheet">
<link href='//fonts.googleapis.com/css?family=Roboto:400,700,300' rel='stylesheet' type='text/css'>
<link href="assets/css/pe-icon-7-stroke.css" rel="stylesheet" />
</head>
<body>
<div class="wrapper">
<div class="sidebar" data-color="blue" data-image="http://www.zastavki.com/pictures/originals/2015/Creative_Wallpaper_Set_of_business_people_100390_.jpg">
<!-- you can change the color of the sidebar using: data-color="blue | azure | green | orange | red | purple" -->
<div class="sidebar-wrapper">
<div class="pic"></div>
<div class="logo">
<a href="#">
<span style="font-size: 28px;">Hello <span style="font-weight: bold;"><?php echo $first_name.' '.$last_name; ?>!</span></span>
</a>
</div>
<ul class="nav">
<li>
<a href="dashboard.php">
<i class="pe-7s-graph"></i>
<p>Dashboard</p>
</a>
</li>
<li class="active">
<a href="user.html">
<i class="pe-7s-user"></i>
<p>User Profile</p>
</a>
</li>
</ul>
</div>
</div>
<div class="main-panel">
<nav class="navbar navbar-default navbar-fixed">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#navigation-example-2">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#">Profile</a>
</div>
<div class="collapse navbar-collapse">
<ul class="nav navbar-nav navbar-left">
<li>
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-dashboard"></i>
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
<i class="fa fa-globe"></i>
<b class="caret"></b>
<span class="notification">5</span>
</a>
<ul class="dropdown-menu">
<li>Notification 1</li>
<li>Notification 2</li>
<li>Notification 3</li>
<li>Notification 4</li>
<li>Another notification</li>
</ul>
</li>
<li>
<a href="">
<i class="fa fa-search"></i>
</a>
</li>
</ul>
<ul class="nav navbar-nav navbar-right">
<li>
<a href="">
Account
</a>
</li>
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown">
Dropdown
<b class="caret"></b>
</a>
<ul class="dropdown-menu">
<li>Action</li>
<li>Another action</li>
<li>Something</li>
<li>Another action</li>
<li>Something</li>
<li class="divider"></li>
<li>Separated link</li>
</ul>
</li>
<li>
<a href="index.php">
Log out
</a>
</li>
</ul>
</div>
</div>
</nav>
<div class="content">
<div class="container-fluid">
<div class="row">
<div class="col-md-8">
<div class="card">
<div class="header">
<h4 class="title">Edit Profile</h4>
</div>
<div class="content">
<form method="POST" action="action.php">
<div class="row">
<div class="col-md-5">
<div class="form-group">
<label>Company (disabled)</label>
<input type="text" class="form-control" disabled placeholder="Company" value="Creative Code Inc.">
</div>
</div>
<div class="col-md-3">
<div class="form-group">
<label>Username</label>
<input name="username" type="text" class="form-control" placeholder="Username" value="<?php echo $username; ?>">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label for="exampleInputEmail1">Email address</label>
<input type="email" class="form-control" placeholder="Email" value="<?php echo $email; ?>">
</div>
</div>
</div>
<div class="row">
<div class="col-md-6">
<div class="form-group">
<label>First Name</label>
<input type="text" name="first_name" class="form-control" placeholder="Company" value="<?php echo $first_name; ?>">
</div>
</div>
<div class="col-md-6">
<div class="form-group">
<label>Last Name</label>
<input type="text" name="last_name" class="form-control" placeholder="Last Name" value="<?php echo $last_name; ?>">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>Address</label>
<input type="text" name="address" class="form-control" placeholder="Home Address" value="Bld Mihail Kogalniceanu, nr. 8 Bl 1, Sc 1, Ap 09">
</div>
</div>
</div>
<div class="row">
<div class="col-md-4">
<div class="form-group">
<label>City</label>
<input type="text" name="city" class="form-control" placeholder="City" value="<?php echo $_SESSION['city']; ?>">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Country</label>
<input type="text" name="country" class="form-control" placeholder="Country" value="Andrew">
</div>
</div>
<div class="col-md-4">
<div class="form-group">
<label>Postal Code</label>
<input type="number" class="form-control" placeholder="ZIP Code">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12">
<div class="form-group">
<label>About Me</label>
<textarea name="aboutme" rows="5" class="form-control" placeholder="Here can be your description" value="Mike">Lamborghini Mercy, Your chick she so thirsty, I'm in that two seat Lambo.</textarea>
</div>
</div>
</div>
<button type="submit" class="btn btn-info btn-fill pull-right">Update Profile</button>
<div class="clearfix"></div>
</form>
</div>
</div>
</div>
<div class="col-md-4">
<div class="card card-user">
<div class="image">
<img src="https://ununsplash.imgix.net/photo-1431578500526-4d9613015464?fit=crop&fm=jpg&h=300&q=75&w=400" alt="..."/>
</div>
<div class="content">
<div class="author">
<a href="#">
<img class="avatar border-gray" src="assets/img/faces/face-3.jpg" alt="..."/>
<h4 class="title"><?php echo $first_name; ?><br />
<small><?php echo $username; ?></small>
</h4>
</a>
</div>
<p class="description text-center"> "Lamborghini Mercy <br>
Your chick she so thirsty <br>
I'm in that two seat Lambo"
</p>
</div>
<hr>
<div class="text-center">
<button href="#" class="btn btn-simple"><i class="fa fa-facebook-square"></i></button>
<button href="#" class="btn btn-simple"><i class="fa fa-twitter"></i></button>
<button href="#" class="btn btn-simple"><i class="fa fa-google-plus-square"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
<footer class="footer">
<div class="container-fluid">
<nav class="pull-left">
<ul>
<li>
<a href="#">
Home
</a>
</li>
<li>
<a href="#">
Company
</a>
</li>
<li>
<a href="#">
Portfolio
</a>
</li>
<li>
<a href="#">
Blog
</a>
</li>
</ul>
</nav>
<p class="copyright pull-right">
© 2016 Creative Tim, made with love for a better web
</p>
</div>
</footer>
</div>
</div>
</body>
<!-- Core JS Files -->
<script src="assets/js/jquery-1.10.2.js" type="text/javascript"></script>
<script src="assets/js/bootstrap.min.js" type="text/javascript"></script>
<!-- Checkbox, Radio & Switch Plugins -->
<script src="assets/js/bootstrap-checkbox-radio-switch.js"></script>
<!-- Charts Plugin -->
<script src="assets/js/chartist.min.js"></script>
<!-- Notifications Plugin -->
<script src="assets/js/bootstrap-notify.js"></script>
<!-- Google Maps Plugin -->
<script type="text/javascript" src="https://maps.googleapis.com/maps/api/js?sensor=false"></script>
<!-- Light Bootstrap Table Core javascript and methods for Demo purpose -->
<script src="assets/js/light-bootstrap-dashboard.js"></script>
<!-- Light Bootstrap Table DEMO methods, don't include it in your project! -->
<script src="assets/js/demo.js"></script>
</html>
I know the code is not secure, this is just for test purposes. Help is highly appreciated.
My website is running with phpstorm's editor's localhot with any error .
http://localhost:63342/html/Bag%C4%B1s/bagisyap.html
on the other hand ; if i want to start with only my localhost
http://localhost/Bag%C4%B1s/index.html
i can not connect bootstrap 's argumant . how i can i solve that ?
<!DOCTYPE html>
<html lang="tr">
<head>
<meta charset="UTF-8">
<title>Bağış Sitesi</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="../Bagıs/public/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="../Bagıs/public/css/main.css">
<!-- Owl Carousel -->
<link rel="stylesheet" href="../Bagıs/public/css/owl.carousel.css">
<link rel="stylesheet" href="../Bagıs/public/css/owl.theme.css">
</head>
<body id="index">
<div class="container main-nav">
<div class="row margin-bottom-zero">
<div class="col-xs-12">
<nav class="navbar">
<ul class="nav navbar-nav">
<li class="active"><i class="glyphicon glyphicon-home"></i> Anasayfa</li>
<li>Neden yardım etmeliyim</li>
<li>Bağış Yap</li>
<li>İhtiyaç sahipleri</li>
<li>Hakkımızda</li>
<li>İletişim</li>
</ul>
<ul class="nav navbar-nav navbar-right user-login-nav">
<li class="dropdown">
<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">
<i class="glyphicon glyphicon-user"></i>
<span class="caret"></span>
</a>
<ul class="dropdown-menu" role="menu">
<li>Giriş</li>
<li>Kayıt Ol</li>
</ul>
</li>
</ul>
</nav>
</div>
</div>
<div class="row panel">
<div class="col-xs-12">
<img class="img-responsive" src="../Bagıs/public/img/logo.png" alt="Logo">
</div>
</div>
</div>
<div class="container">
<div class="row white-box-style min-row-height">
<form action="bagısyap.php" method="POST">
<div class="col-xs-4 choose-category">
<h4>Kategori Seçin</h4>
<select class="form-control" name="category">
<option value="0">Kategori Seçin</option>
<option value="1">Elbise</option>
<option value="2">Teknoloji</option>
<option value="3">Mobilya</option>
<option value="3">Küçük Ev Aletleri</option>
</select>
<select class="form-control" name="category">
<option value="0">Alt Kategori Seçin</option>
<option value="1">Telefon</option>
<option value="2">Laptop</option>
<option value="3">Monitör</option>
<option value="3">Telefon Kılıfları</option>
</select>
</div>
<div class="col-xs-8">
<div class="row">
<h4> </h4>
<div class="col-xs-3">
<a href="#" class="thumbnail">
<img class="img-responsive" src="../Bagıs/public/img/empty-image.jpg" alt="...">
</a>
</div>
<div class="col-xs-9">
<textarea name="desc" class="form-control" rows="6" placeholder="Ürün hakkında kısa bir açıklama"></textarea>
</div>
</div>
<div class="checkbox">
<label>
<input type="checkbox" value="1">
Bu ürünü ismimi gizleyerek (anonim olarak) ekleyin
</label>
</div>
<button type="submit" class="btn btn-primary">Tamamla</button>
</div>
</form>
</div>
</div>
<div class="modal fade" id="login-modal-box" role="dialog" aria-labelledby="gridSystemModalLabel" aria-hidden="true">
<form action="#giris-kontrol" method="POST">
<div class="modal-dialog user-login-box-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="gridSystemModalLabel">Kullanıcı Giriş Paneli</h4>
</div>
<div class="modal-body">
<div class="container-fluid">
<div class="row">
<div class="form-group">
<label for="exampleInputEmail1">Eposta Adresiniz</label>
<input type="email" class="form-control" id="exampleInputEmail1" placeholder="Enter email">
</div>
<div class="form-group">
<label for="exampleInputPassword1">Şifre</label>
<input type="password" class="form-control" id="exampleInputPassword1" placeholder="Password">
</div>
<div class="checkbox">
<label>
<input type="checkbox"> Beni hatırla
</label>
</div>
</div>
</div>
</div>
<div class="modal-footer">
Giriş Yap
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</form>
</div><!-- /.modal -->
<!-- Include Jquery -->
<script src="../Bagıs/public/js/jquery-1.11.1.js"></script>
<!-- Latest compiled and minified JavaScript -->
<script src="../Bagıs/public/js/bootstrap.min.js"></script>
<script src="../Bagıs/public/js/owl.carousel.min.js"></script>
<script src="../Bagıs/public/js/script.js"></script>
</body>
</html>