PHP Class not found while it's succesfully included - php

I have searched on this forum for a solution and other places as well. But I can't find the problem with the code I wrote. The php file called Email_Service.php looks like this:
<?php
////////////////////////////////////////
// [Email-Service] v3.5 /
//////////////////////////////////////
//Email Service Class
class EmailService {
//Properties
private $email_basis;
private $type;
//Constructor
function __construct($type) {
echo '[EmailService] type: ' . $type;
}
//Send Email function with passed on arrays from test_pagina.php
function versturen($emailInfo, $klantInfo) {
//Email info
$email_van = $emailInfo['email_van'];
$email_naar = $emailInfo['email_naar'];
$email_onderwerp = $emailInfo['email_onderwerp'];
//Controleer of het opgegeven email adres geldig is en geen rare tekens bevat
$pattern = "/^[_a-z0-9-]+(\.[_a-z0-9-]+)*#[a-z0-9-]+(\.[a-z0-9-]+)*(\.[a-z]{2,3})$/i";
if (preg_match($pattern, trim(strip_tags($emailInfo['email_van'])))) {
$cleanedFrom = trim(strip_tags($emailInfo['email_van']));
} else {
return "The email address you entered was invalid. Please try again!";
}
//Hier word de email_template geopend voor elke type.
//Zorg vraag formulier
if ($emailInfo['type'] == 'zorgvraag') {
//$email_basis = file_get_contents(base_url() . 'include/email_template_zorgvraag.txt'); //(LOKAAL)
//file_get_contents(base_url() . "assets/email_template.txt"); //(ONLINE)
} else if ($emailInfo['type'] == 'aanmelden') {
//$email_basis = file_get_contents(base_url() . 'mail_php/email_template_aanmeldformulier.txt'); //(LOKAAL)
}
//Personaliseer de email door de velden te vervangen met de ingevulde parameters
$email_basis = str_replace("f_voornaam", $klantInfo['voornaam'], $email_basis);
$email_basis = str_replace("f_achternaam", $klantInfo['achternaam'], $email_basis);
$email_basis = str_replace("f_telefoon", $klantInfo['telefoon'], $email_basis);
$email_basis = str_replace("f_email", $klantInfo['email_van'], $email_basis);
$email_basis = str_replace("f_bericht", $klantInfo['$bericht'], $email_basis);
$email_basis = str_replace("f_locatie", $klantInfo['$locatie'], $email_basis);
//Genereer headers
$headers = "From: " . $cleanedFrom . "\r\n";
$headers .= "Reply-To: ". strip_tags($_POST['f_email']) . "\r\n";
$headers .= "MIME-Version: 1.0\r\n";
$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
//Hier word de mail verstuurd als alles goed is
if (mail($emailInfo['email_naar'], $emailInfo['email_onderwerp'], $email_basis, $headers)) {
//CC
mail('info#yourdomain.nl', $emailInfo['email_onderwerp'], $email_basis, $headers);
} else {
echo 'Er is iets fout gegaan. Probeer het later nog een keer!';
die();
}
}
}
?>
It's called from another php file called test_pagina.php which looks like this:
<?php
include 'https://yourdomain.nl/assets/Email_Service.php'; //ONLINE
//require base_url() . 'assets/Email_Service.php'; //LOKAAL
//Haal gemeeente uit de adres balk
$url = "https://".$_SERVER['HTTP_HOST'].$_SERVER['REQUEST_URI'];
$url_onderdeel = explode('/', $url);
$gemeente = $url_onderdeel[4];
$gemeenteHoofdletter = ucfirst($gemeente);
//Email parameters
$email_van; $email_naar; $email_onderwerp = "Vraag van ". $gemeenteHoofdletter;
$voornaam; $achternaam;
$telefoon; $bericht;
$emailInfo; $klantInfo;
//Controleert de ingevulde velden
if (isset($_POST['f_email_van']) ||
isset($_POST['f_voornaam']) ||
isset($_POST['f_achternaam']) ||
isset($_POST['f_telefoon']) ||
isset($_POST['f_bericht'])) {
//Email info
$email_van = $_POST['f_email_van'];
$email_naar = "socialekaartpro#gmail.com";
/*Stuur Email
Dé Parameters:(emailInfo, klantInfo)*/
$emailInfo = array (
'email_van' => $email_van,
'email_naar' => $email_naar,
'email_onderwerp' => $email_onderwerp);
$klantInfo = array (
'voornaam' => $_POST['f_voornaam'],
'achternaam' => $_POST['f_achternaam'],
'telefoon' => $_POST['f_telefoon'],
'bericht' => $_POST['f_bericht'],
'locatie' => $gemeenteHoofdletter);
//Voeg de mail script toe zodat we de functie stuurEmail kunnen aanroepen
$mail = new EmailService('zorgvraag');
$mail -> versturen($emailInfo, $klantInfo);
}
?>
<!--=== Type Woning ===-->
<div class="page-topbar">
<div class="container">
<div class="row">
<div class="col-sm-4">
<h3>Bedrijfsnaam</h3>
</div>
<div class="col-sm-8 hidden-xs">
<ol class="breadcrumb">
<li>Gemeente Nijmegen</li>
<li>Woningverhuur</li>
<li class="active">Bedrijfsnaam</li>
</ol>
</div>
</div>
</div>
</div>
<div class="content container" style="padding-top: 10px;">
<div class="row">
<div class="col-md-12">
<div class="panel panel-default">
<div class="panel-heading left" style="margin-bottom: -1px;background-color: rgba(255, 255, 255, 0);"><i class="glyphicon glyphicon-menu-left"></i> Terug naar overzicht
<ul class="pull-right">
<i class="fa fa-print" aria-hidden="true"></i>Print
</ul>
</div>
</div>
</div>
</div>
</div>
<!--================================== Overzicht ========================-->
<div class="job-description">
<div class="container content">
<div class="row">
<div class="col-md-8">
<div class="left-inner" style="margin-left: 0px;">
<h3 style="margin-top: 28px;margin-bottom: 12px;">Test pagina</h3>
<p>
LEEG LEEG
</p>
<h3 style="margin-top: 40px;margin-bottom: 12px;">LEEG LEEG</h3>
<p>
LEEG LEEG
</p>
<h3 style="margin-top: 40px;margin-bottom: 12px;">LEEG LEEG</h3>
<p>
LEEG LEEG
</p>
<h3 style="margin-top: 40px;margin-bottom: 12px;">LEEG LEEG</h3>
<p>
LEEG LEEG
</p>
<br>
<br>
Naar de website LEEG LEEG
<br>
</div>
</div>
<div class="col-sm-4">
<div class="panel panel-default" style="margin-top: 9px;">
<div class="panel-heading" style="border-bottom-color: rgba(217, 217, 217, 0);margin-top: 2px;">Doelgroep</div>
<div class="panel-body">
<div class="row">
<p style="margin-top: -22px;margin-left: 16px;padding-right: 7px;">
LEEG | LEEG
</p>
</div>
</div>
<div class="panel-heading" style="border-bottom-color: rgba(217, 217, 217, 0);margin-top: -14px;">Leeftijdscatogarie</div>
<div class="panel-body">
<div class="row">
<p style="margin-top: -22px;margin-left: 16px;margin-bottom: 2px;">
LEEG | LEEG
</p>
</div>
</div>
</div>
<div class="panel panel-default" style="margin-top: 9px;">
<div class="panel-heading" style="border-bottom-color: rgba(217, 217, 217, 0);margin-bottom: -15px;">Contact gegevens</div>
<div class="panel-body">
<div class="row">
<div class="col-xs-4 col-md-4">
<p style="font-weight: 600;color: #000000;margin-bottom: 0px;">Naam</p>
<p style="font-weight: 600;color: #000000;margin-bottom: 0px;">Adres</p>
<p style="font-weight: 600;color: #000000;margin-bottom: 0px;">Postcode</p>
<p style="font-weight: 600;color: #000000;margin-bottom: 0px;">Plaats</p>
<p style="font-weight: 600;color: #000000;margin-bottom: 0px;">Telefoon</p>
</div>
<div class="col-xs-6 col-md-6" style="width: 65%;">
<p style="margin-bottom: 0px;">LEEG</p>
<p style="margin-bottom: 0px;">LEEG</p>
<p style="margin-bottom: 0px;">LEEG</p>
<p style="margin-bottom: 0px;">LEEG</p>
<p style="margin-bottom: 0px;">LEEG</p>
</div>
</div>
<hr style="margin-top: 20px;margin-bottom: 10px;">
<div class="row">
<div class="col-md-12">
<div class="panel-heading" style="margin-left: -15px;margin-top: -12px;margin-bottom: -15px;">
<h4 class="panel-title">
<span style="font-size: 13px;font-weight: 600;">Heeft u een zorgvraag, </span>
<a href="#mail-1" data-parent="#accordion-v1" data-toggle="collapse" class="accordion-toggle">
<span style="color: #3299bb;font-weight: 600;text-decoration: underline;"> klik dan hier</span>
</a>
</h4>
</div>
<!--Bevestiging script JSalert
<div>
<script src="https://socialekaartgemeente.nl/assets/js/sweetalert-dev.js"></script>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
<link rel="stylesheet" href="https://socialekaartgemeente.nl/assets/css/sweetalert.css">
<script type="text/javascript">
function JSalert(){
//event.preventDefault();;
swal("Congrats!", ", Uw mail is verzonden!", "success");
}
</script>
</div>-->
<!-- =============================[EMAIL FORM]================================== -->
<!-- onSubmit="window.location.reload()" -->
<!-- ="javascript:JSalert();" -->
<div class="panel-collapse collapse" id="mail-1">
<div class="panel-body" style="margin-left: -15px;">
<form action="" method="post" id="form_mail" >
<div class="row">
<div class="col-sm-12">
<div class="form-group">
<input id="voornaam" type="text" name="f_voornaam" class="form-control" placeholder="Voornaam*" required="required" data-error="Firstname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input id="achternaam" type="text" name="f_achternaam" class="form-control" placeholder="Achternaam*" required="required" data-error="Firstname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input id="telefoon" type="text" name="f_telefoon" class="form-control" placeholder="Telefoonnummer*" required="required" data-error="Firstname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
<div class="col-sm-12">
<div class="form-group">
<input id="email" type="text" name="f_email_van" class="form-control" placeholder="Email*" required="required" data-error="Firstname is required.">
<div class="help-block with-errors"></div>
</div>
</div>
</div>
<div class="form-group">
<label class="sr-only" for="message">Bericht</label>
<textarea class="input-lg form-control" name="f_bericht" rows="5" id="bericht" placeholder="Uw zorgvraag"></textarea>
<span class="help-block"></span>
</div>
<!--Verzend knop-->
<button type="submit" class="btn btn-sm btn-primary" style="margin-bottom: -15px;">Bericht verzenden</button>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="panel panel-default" style="margin-top: 9px;">
<div class="panel-body">
<div class="row">
<div class="col-md-12">
<ul class="social-icons pull-left" style="margin-left: -2px;margin-top: 4px;margin-bottom: -8px;">
<li style="margin-left: 0px;"></li>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>
</div>
</div>
</div>
<!-- Google Maps -->
<div class="panel panel-default" style="margin-top: 9px;">
<div class="panel-body">
<!-- Laad Google Maps -->
<style>#map-container { height: 200px }</style>
<div id="map-container" class="col-md-12"></div>
<script src="//maps.google.com/maps/api/js?sensor=false"></script>
<script>
function init_map() {
//Definieer de coordinaten en zet zoom level
var var_location = new google.maps.LatLng(00000000, 00000000);
var var_mapoptions = {
center: var_location,
zoom: 14
};
//Plaats de marker bij de coordinaten
var var_marker = new google.maps.Marker({
position: var_location,
map: var_map,
title:"Venice"});
//^Teken the map met de instellingen hierboven^
var var_map = new google.maps.Map(document.getElementById("map-container"),
var_mapoptions);
var_marker.setMap(var_map);
}
google.maps.event.addDomListener(window, 'load', init_map);
</script>
</div>
</div>
</div>
</div>
</div>
</div>
I keep getting this error:
Fatal error:
Class 'EmailService' not found in (/file location)
Which is in this case uploaded to the server so it can be easily called upon on the whole website. I have never had this problem with writing and using a class. What am I possibly doing wrong? A lot more people have posted the same question about this error before, but they seem to have a different setup.

You can not include file by URL.
You have to use path of File location on server.
This is wrong
include 'https://yourdomain.nl/assets/Email_Service.php'; //ONLINE
//require base_url() . 'assets/Email_Service.php'; //LOKAAL
you have to use absolute or relative path
include "assets/Email_Service.php"; //relative path
include "<directory_path_of_your_project_on_server>/assets/Email_Service.php"; //absolute path
How to get Server file Location
create test.php in your root of with below content
<?php
echo dirname(__FILE__);
die;
execute above from browser, will be display path of your project on server and use that path.

Related

Receive data via POST via AJAX

I'm trying to send data from a form to a PHP page, via AJAX, but I'm not sure if I'm doing it correctly, because I'm not able to echo these variables.
Here is the code of the page containing the form (some information has been hidden, but the code is working):
<body>
<div class="container">
<div class="row">
<div class="mt-5 col-12 col-md-12 col-lg-12">
<form id="adicionar_funcionario" method="POST" enctype="multipart/form-data" class="p-md-5">
<h2 class="text-center"><?php echo $titulo; ?></h2>
<div style="float: left;" class="mt-5">
<img src="../img/avatar.png" alt="Selecione uma imagem" <?php if(isset($errofoto)){echo "class='invalidoimg imgupload'";}else{echo "class='imgupload'";}?> id="imgfoto">
<img src="../img/lixeira.png" id="lixeira" alt="Limpar foto" class="lixeira">
<span class="erro"><?php if(isset($errofoto)){echo $errofoto;}?></span>
</div>
<div class="row mt-5">
<div class="ms-2 ms-lg-5 text-center col-5 col-lg-1 col-md-2 col-sm-2">
<!-- SITUAÇÃO -->
<label for="situacao"> Situação: </label>
</div>
<div class="col-7 col-lg-2 col-md-4 col-sm-4">
<div class="form-check form-switch">
<input id="situacao" name="situacao" class="form-check-input" type="checkbox" value="1" onclick="mudarlabel(this.checked)" <?php if(isset($situacao)){echo "checked";}else{echo "checked";} ?>>
<label class="form-check-label" for="situacao" id="labelsituacao"><?php if(isset($situacao)){echo "Ativado";}else{echo "Ativado";} ?></label>
</div>
</div>
</div>
<div class="ms-lg-5 mt-4 col-12 col-md-12 col-lg-12">
<div class="row">
<div class="ms-lg-5 col-12 col-lg-4 col-md-4 col-sm-4">
<!-- PRONOME -->
<label for="pronome"> Pronome </label>
<select id="pronome" <?php if(isset($erropronome)){echo "class='invalido form-select'";}else{echo "class='form-select'";}?> <?php if (isset($_POST['pronome'])){echo "value='".$_POST['pronome']."'";}?> name="pronome">
<?php
if ((isset($_POST['pronome']))){
?>
<option selected><?php echo $_POST['pronome'];?></option>
<?php
}else{
?>
<option selected>Selecione uma opção</option>
<?php
};
?>
<option value="Ele/Dele">Ele/Dele</option>
<option value="Ela/Dela">Ela/Dela</option>
<option value="Todos">Todos</option>
</select>
<span class="erro"><?php if(isset($erropronome)){echo $erropronome;}?></span>
</div>
<div class="col-12 col-lg-4 col-md-4 col-sm-4">
<!-- NOME COMPLETO -->
<label for="nomecompleto"> Nome completo </label>
<input type="text" id="nomecompleto" placeholder="Como consta no CPF..."<?php if(isset($erronomecompleto)){echo "class='invalido form-control'";}else{echo "class='form-control'";}?> <?php if (isset($_POST['nomecompleto'])){echo "value='".$_POST['nomecompleto']."'";}?> name="nomecompleto">
<span id="erronomecompleto" class="erro"><?php if(isset($erronomecompleto)){echo $erronomecompleto;}?></span>
</div>
</div>
</div>
<div class="ms-lg-5 mt-4 col-12 col-md-12 col-lg-12">
<div class="row">
<div class="ms-lg-5 col-12 col-lg-4 col-md-3 col-sm-4">
<!-- NOME SOCIAL -->
<label for="nomesocial"> Nome social </label>
<input type="text" id="nomesocial" placeholder="Gostaria de ser chamado(a)..." <?php if(isset($erronomesocial)){echo "class='invalido form-control'";}else{echo "class='form-control'";}?> <?php if (isset($_POST['nomesocial'])){echo "value='".$_POST['nomesocial']."'";}?> name="nomesocial">
<span class="erro"><?php if(isset($erronomesocial)){echo $erronomesocial;}?></span>
</div>
<div class="col-12 col-lg-4 col-md-3 col-sm-4">
<!-- NOME -->
<label for="nomeartistico"> Nome Artístico </label>
<input type="text" id="nomeartistico" placeholder="Irá aparecer nos créditos..." <?php if(isset($erronomeartistico)){echo "class='invalido form-control'";}else{echo "class='form-control'";}?> <?php if (isset($_POST['nomeartistico'])){echo "value='".$_POST['nomeartistico']."'";}?> name="nomeartistico">
<span class="erro"><?php if(isset($erronomeartistico)){echo $erronomeartistico;}?></span>
</div>
</div>
</div>
<input accept="image/png,image/jpeg,image/jpg" type="file" id="foto" name="foto">
<input type="text" id="removerfoto" name="removerfoto">
<div class="form-group text-center">
<button id="criar" type="submit" class="mt-5 botao">Criar</button>
</div>
</div>
<!-- Modal -->
<div class="modal hide fade" id="anexar_documentos" tabindex="-1" role="dialog" aria-labelledby="Documentacao" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="TituloModalLongoExemplo">Anexar documentos</h3>
<button type="button" class="close" data-bs-dismiss="modal" aria-label="Fechar">
<span aria-hidden="true">×</span>
</button>
</div>
<h6 class="ms-3 mt-2"><b><i>Os arquivos precisam ser no formato jpg, png ou pdf e ter, no máximo, 2 MB</i></b></h6>
<div id="anexos" class="modal-body">
Escolha um regime, um cargo e um nível para anexar os documentos
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../bootstrap/_bootstrap/js/enviar_formulario_adicionar_funcionario.js"></script>
</body>
</htlm>
Here is the AJAX code, being called as enviar_formulario_adicionar_funcionario.js:
$(document).ready(function(){
$("#criar").click(function(){
event.preventDefault();
var dados = new FormData(document.getElementById("adicionar_funcionario"));
$.ajax({
url: '../utilities/criarfuncionario.php',
method: 'POST',
dataType: 'json',
cache: false,
contentType: false,
processData: false,
data: {
data: dados
},
success: function(resultado){
alert(resultado.erronomecompleto);
}
})
})
})
And here is the page being sent the data (again some data was removed as it was not relevant to the problem):
<?php
if (((isset($_POST['nomecompleto'])) || (isset($_POST['nomesocial'])) ||
(isset($_POST['nomeartistico'])) || (isset($_POST['telefone'])) ||
(isset($_POST['rg'])) || (isset($_POST['cpf'])) || (isset($_POST['email'])) ||
(isset($_POST['datanasc'])) || (isset($_POST['endereco'])) ||
(isset($_POST['bairro'])) || (isset($_POST['complemento'])) ||
(isset($_POST['cidade'])) || (isset($_POST['cep'])) ||
(isset($_POST['datacontratacao'])) || (isset($_POST['cargo'])) ||
(isset($_POST['projeto'])) || (isset($_POST['datasaida'])) ||
(isset($_POST['regime'])) || (isset($_POST['telefone'])) ||
(isset($_FILES['foto'])) || (isset($_POST['uf'])) ||
(isset($_POST['numero'])) || (isset($_POST['inicio_ferias'])) ||
(isset($_POST['fim_ferias']))) &&
(strpos($_SERVER['REQUEST_URI'], 'cadastro_convite') == false)){
echo json_encode(array ('erronomecompleto' => 'Passei aqui'));
$dados = filter_input_array(INPUT_POST, FILTER_DEFAULT);
$query_campo_obrigatorio = "SELECT * FROM campo_obrigatorio";
$campo_obrigatorio_banco = $conn->prepare($query_campo_obrigatorio);
$campo_obrigatorio_banco->execute();
while($campo_obrigatorio = $campo_obrigatorio_banco->fetch(PDO::FETCH_ASSOC)){
if($campo_obrigatorio['campo_nomecompleto'] == '1'){
if((empty($dados['nomecompleto'])) || (str_replace(" ", "", $dados['nomecompleto']) == "")){
$erronomecompleto = 'Preencha este campo';
}
if(!preg_match("/^[a-zA-Z-' \pL]*$/u", limpapost($dados['nomecompleto']))){
$erronomecompleto = "Apenas letra e espaços em branco neste campo";
}else{
$nomecompleto = limpapost($dados['nomecompleto']);
}
}else{
if((empty($dados['nomecompleto'])) || (str_replace(" ", "", $dados['nomecompleto']) == "")){
$nomecompleto = "";
}
if(!preg_match("/^[a-zA-Z-' \pL]*$/u", limpapost($dados['nomecompleto']))){
$erronomecompleto = "Apenas letra e espaços em branco neste campo";
}else{
$nomecompleto = limpapost($dados['nomecompleto']);
}
}
When I put the echo json_encode inside the IF conditions, I don't get a response, however, if I put it outside the IF conditions, I get the return "Passei aqui".
So I came to the conclusion that my $POST['anything'] is probably not getting anything.
I also tried to pass a value to any field and send the data (to see if it entered the IF conditions), however, I didn't get a return.
I apologize in advance, as I am new to this subject.

show alert bootstrap when mail sended without new page

I would like to display an alert after sending an email as in this portfolio: https://www.mathieu-crevoulin.com/ after when you send mail you can see this alert : E-mail envoyé avec succès !
Merci pour votre message !
Une réponse vous sera apportée dans les plus brefs délais.
contact.php
<?php
use PHPMailer\PHPMailer\PHPMailer;
use PHPMailer\PHPMailer\Exception;
require 'PHPMailer/src/Exception.php';
require 'PHPMailer/src/PHPMailer.php';
require 'PHPMailer/src/SMTP.php';
if(isset($_POST["send"])){
$body = $_POST['message'];
$name = $_POST['name'];
$phone = $_POST['phone'];
$email = $_POST['email'];
$mail = new PHPMailer(true);
$mail->isSMTP();
$mail->Host = 'smtp.gmail.com';
$mail->SMTPAuth = true;
$mail->Username = 'mymail#mail.com';
$mail->Password = 'psw';
$mail->SMTPSecure = PHPMailer::ENCRYPTION_SMTPS; //Enable implicit TLS encryption
$mail->Port = 465;
$mail->setFrom('mymail#mail.com');
$mail->addAddress($_POST["email"]);
$mail->isHTML(true);
$mail->Subject = 'Projet web';
$mail->Body = "Message:" . $body . "<br>Phone number: " . $phone . "<br>Name: " . $name . "<br>Mail: " . $email;
$mail->send();
header("Location: http://127.0.0.1/test2/confirmmail.html#scrollspyHeading7");
}
index.php
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-gH2yIJqKdNHPEq0n4Mqa/HGKIhSkIHeL5AyhkYV8i59U5AR6csBvApHHNl/vI1Bx" crossorigin="anonymous">
<link rel="stylesheet" href="css/style.css">
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons#1.9.1/font/bootstrap-icons.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/animate.css/3.7.2/animate.min.css" integrity="sha512-doJrC/ocU8VGVRx3O9981+2aYUn3fuWVWvqLi1U+tA2MWVzsw+NVKq1PrENF03M+TYBP92PnYUlXFH1ZW0FpLw==" crossorigin="anonymous" referrerpolicy="no-referrer" />
<link rel="stylesheet" href="https://unpkg.com/aos#next/dist/aos.css" />
<script src="https://kit.fontawesome.com/1aca141b14.js" crossorigin="anonymous"></script>
<title>Portfolio</title>
</head>
<body>
<style>
#success-message, #error-message
{
display: none;
}
</style>
<nav class="navbar navbar-expand-lg fixed-top navbar-custom" style="padding: 1%;">
<div class="container">
<a class="navbar-brand" href="#">
<img src="logo.png" alt="Avatar Logo" style="width:40px;" class="rounded-pill">
</a>
<button class="navbar-toggler" type="button" data-bs-toggle="collapse" data-bs-target="#navbarNav" aria-controls="navbarNav" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse justify-content-center" id="navbarNav">
<ul class="navbar-nav justify-content-center">
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading1">Home</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading2">Services</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading3">Compétences</a>
</li>
<!-- <li class="nav-item">
<a class="nav-link" href="#scrollspyHeading4">Portfolio</a>
</li> -->
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading6">À Propos</a>
</li>
<li class="nav-item">
<a class="nav-link" href="#scrollspyHeading7">Contact</a>
</li>
</ul>
</div>
</div>
</nav>
<!-- images/114-1144561_copyright-free-images-on-desk-with-laptop-and.jpg
images/269-2698560_high-resolution-laptop-desktop-wallpaper-hd.jpg
images/10705380.jpg -->
<div data-bs-spy="scroll" data-bs-target="#navbar-example2" data-bs-root-margin="0px 0px -40%" data-bs-smooth-scroll="true" class="scrollspy-example bg-light rounded-2" tabindex="0">
<div id="carouselExampleInterval" class="carousel slide" data-bs-ride="carousel">
<div class="carousel-inner" id="scrollspyHeading1">
<div class="carousel-item active " data-bs-interval="3000">
<img src="images/888777555.jpeg" class="d-block w-100" alt="...">
<div class="carousel-caption d-flex flex-column justify-content-center h-100" style="top: 0">
<h2 class="in-left">Développeur indépendant</h2>
<p class="in-left">SAVINOV Denis</p>
</div>
</div>
</div>
<div class="col-10 footertext" data-aos="fade-right">
<h5 class="text-end"><strong>Intégration Web</strong></h5>
<p class="text-end grisclaire">Des intégrations (X)HTML / CSS respectueuses des
standards du Web.
</p>
</div>
<div class="col-2" data-aos="fade-right">
<i class="fa-solid fa-code fa-2xl"></i>
</div>
<div class="col-10 footertext" data-aos="fade-right">
<h5 class="text-end"><strong>Développements spécifiques</strong></h5>
<p class="text-end grisclaire">Des outils adaptés à votre coeur de métier,
applications & solutions personnalisées.</p>
</div>
<div class="col-2" data-aos="fade-right">
<i class="fa-solid fa-wrench fa-2xl"></i>
</div>
<div class="col-10 footertext" data-aos="fade-right">
<h5 class="text-end"><strong>Référencement naturel</strong></h5>
<p class="text-end grisclaire">Affichage sémantique des informations,
des pages propres pour un référencement optimal.</p>
</div>
<div class="col-2" data-aos="fade-right">
<i class="img-fluid material-icons" style="width: 100%;"><img class="img-fluid w-100" src="images/5902216.png" alt="" style="width: 100%;"></i>
</div>
</div>
</div>
<div class="col-md-4 mb-3 mb-md-0 row align-items-center">
<div class="row align-items-center" data-aos="fade-up">
<div class="col">
<img src="images/index1.jpeg" class="d-block w-100 d-none d-lg-block" alt="...">
</div>
</div>
</div>
<div class="col-md-4 mb-3 mb-md-0">
<div class="row align-items-center">
<div class="col-2" data-aos="fade-left">
<i class="img-fluid material-icons" style="width: 100%;"><img src="images/kisspng-icon-design-web-development-responsive-web-design-black-brush-5afd4d493dd9d2.7237427015265498332534.png" alt="" style="width: 100%;"></i>
</div>
<div class="col-10 footertext" data-aos="fade-left">
<h5 class="text-start"><strong>Conception graphique & Webdesign</strong></h5>
<p class="text-start grisclaire">Logos, templates Web, plaquettes publicitaires,
cartes de visite, newsletters...</p>
</div>
<div class="col-2" data-aos="fade-left">
<i class="img-fluid material-icons" style="width: 100%;"><img src="images/3938579.png" alt="" style="width: 100%;"></i>
</div>
<div class="col-10 footertext" data-aos="fade-left">
<h5 class="text-start"><strong>Dynamisme des pages</strong></h5>
<p class="text-start grisclaire">Des animations de contenu non intrusives
pour embellir votre projet.</p>
</div>
<div class="col-2" data-aos="fade-left">
<i class="img-fluid material-icons" style="width: 100%;"><img src="images/2739572-200.png" alt="" style="width: 100%;"></i>
</div>
<div class="col-10 footertext" data-aos="fade-left">
<h5 class="text-start"><strong>Interface d'administration</strong></h5>
<p class="text-start grisclaire">Outils spécifiques au bon fonctionnement
de votre entreprise.</p>
</div>
<div class="col-2" data-aos="fade-left">
<i class="img-fluid material-icons" style="width: 100%;"><img src="images/1027666.png" alt="" style="width: 100%;"></i>
</div>
<div class="col-10 footertext" data-aos="fade-left">
<h5 class="text-start"><strong>Responsive design</strong></h5>
<p class="text-start grisclaire">Compatible tous supports, tablette & application
mobile.</p>
</div>
</div>
</div>
</div>
</div>
</section>
<div class="imagesjolie">
<div class="parallax-header" style=" background: #000;
background: linear-gradient(
rgba(0, 0, 0, 0.3),
rgba(0, 0, 0, 0.8)
),
url(1393785.jpg);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;">
<div class="container d-flex align-items-center justify-content-center" style="height: 200px;">
<div class="header-content">
<h1 class="text-center imagebluranimation" style="color: white;">Développement Web Responsive
</h1>
<h4 class="text-center imagebluranimation" style="color: white;">Compatible Mobile, Tablettes &
P.C</h4>
</div>
</div>
</div>
</div>
<div class="imagesjolie">
<div class="parallax-header" style=" background: #000;
background: linear-gradient(
rgba(0, 0, 0, 0.3),
rgba(0, 0, 0, 0.8)
),
url(521120.jpg);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;">
<div class="container d-flex align-items-center justify-content-center" style="height: 200px;">
<div class="header-content">
<h1 class="text-center imagebluranimation" style="color: white;"> PME, associations ou
particuliers,
je réponds à vos besoins en développement web </h1>
</div>
</div>
</div>
</div>
</br>
<div class="container text-center" id="scrollspyHeading6" style="padding-bottom: 3%;">
<h1 style="padding-top: 4%;" data-aos="fade-down">
<g>À PROPOS</g>
</h1>
<h4 style="color: rgb(117, 111, 111);" data-aos="fade-down">Je suis développeur web freelance et j'aime ça !
</h4>
<div class="row gx-4 gx-lg-5">
<div class="col-md-4 mb-3 mb-md-0" data-aos="fade-right">
<h4 class="text-start">Un développeur web passionné !</h4>
<p class="text-start grisclaire">Ma passion pour le développement web commence en 2003 et m'a
demandé un
changement
radical de cursus
afin de pouvoir pleinement l'exploiter.</br> </br>
Dès lors, je mis tout en oeuvre pour percer dans cette voie, tout en prenant du plaisir sur les
divers projets développés.</br> </br>
En Mai 2009, je décide de devenir développeur web indépendant après plusieurs postes en tant que
développeur web « full-stack » réussis, qui me conforteront dans cette idée afin de toucher un
plus
large panel de domaines d'activités, voir du pays et conquérir le monde !</p>
</div>
<div class="col-md-4 mb-3 mb-md-0 row align-items-center" data-aos="fade-up">
<div class="row align-items-center">
<div class="col">
<img src="images/index1.jpeg" class="d-block w-100 d-none d-lg-block" alt="...">
</div>
</div>
</div>
<div class="col-md-4 mb-3 mb-md-0" data-aos="fade-left">
<h4 class="text-start">Expérience en développement</h4>
<p class="text-start grisclaire"> Mon expérience acquise au fil des projets me permet de mieux
comprendre les
attentes d'un client
et de
répondre précisement au besoin demandé en fonction du domaine d'activité.</p>
<p class="text-start grisclaire">Du site vitrine au projet plus complexe, je vous propose une
expertise et un
développement web qui
correspond à vos attentes & à vos besoins.</p>
<h3 class="text-start">Un tarif adapté à votre projet</h3>
<p class="text-start grisclaire"> Travaillant régulièrement avec des PME, associations ou
particuliers, je vous
propose des solutions
à
votre portée & adaptée à votre budget.</p>
</div>
</div>
</div>
<div class="imagesjolie">
<div class="parallax-header" style=" background: #000;
background: linear-gradient(
rgba(0, 0, 0, 0.3),
rgba(0, 0, 0, 0.8)
),
url(1393769.jpg);
background-attachment: fixed;
background-position: center;
background-repeat: no-repeat;
background-size: cover;">
<div class="container d-flex align-items-center justify-content-center" style="height: 200px;">
<div class="header-content">
<h1 class="text-center imagebluranimation" style="color: white;"> Un interlocuteur unique pour
un site internet
réussi
!
</h1>
</div>
</div>
</div>
</div>
<div class="container text-center" id="scrollspyHeading7">
<h1 style="padding-top: 4%;" data-aos="fade-down">
<b>CONTACTEZ-MOI</b>
</h1>
<h3 class="footertext" style="background-color: rgb(245, 245, 245);padding: 1%;" data-aos="fade-down"><b>Une
idée ? Un projet ? N'hésitez pas à
demander un devis !
[GRATUIT]</b></h3>
<div class="row align-items-center" style="padding: 3%;">
<div class="col-md-4 mb-3 mb-md-0 text-start">
<div class="row">
<div class="col">
<div class="row" data-aos="fade-right">
<div class="col-2 align-self-center">
<i class="bi bi-geo-alt-fill w-100"></i>
</div>
<div class="col-10" style="padding-top: 3%; padding-bottom: 3px; border-bottom: 1px solid rgb(235, 232, 232);">
<h6><b>ADRESSE</b></h6>
<p>45, allée des Grives 83390 Cuers</p>
</div>
<div class="col-2 align-self-center">
<i class="bi bi-whatsapp"></i>
</div>
<div class="col-10" style="padding-top: 3%; padding-bottom: 3px; border-bottom: 1px solid rgb(235, 232, 232);">
<h6><b>Téléphone</b></h6>
<p>(+33) 6.15.42.10.45</p>
</div>
<div class="col-2 align-self-center">
<i class="bi bi-envelope-fill"></i>
</div>
<div class="col-10" style="padding-top: 3%; border-bottom: 1px solid rgb(235, 232, 232);">
<h6><b>E-mail</b></h6>
<p>contact#mcrevoulin.com</p>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-4 mb-3 mb-md-0">
<iframe src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d84484.16954510748!2d7.692039647318505!3d48.56905316137844!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x4796c8495e18b2c1%3A0x971a483118e7241f!2sStrasbourg!5e0!3m2!1sen!2sfr!4v1659196020939!5m2!1sen!2sfr" width="300" height="400" style="border:0;" allowfullscreen="" loading="lazy" referrerpolicy="no-referrer-when-downgrade" data-aos="fade-up"></iframe>
<!-- <iframe
src="https://www.google.com/maps/embed?pb=!1m18!1m12!1m3!1d316530.06898113067!2d38.75890546037433!3d51.69843674434513!2m3!1f0!2f0!3f0!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x413b2f5ce874e813%3A0x48d94c0efba762bd!2sWoronesch%2C%20Oblast%20Woronesch%2C%20Russland!5e0!3m2!1sde!2sde!4v1658941426253!5m2!1sde!2sde"
width="300" height="200" style="border:0;" allowfullscreen="" loading="lazy"
referrerpolicy="no-referrer-when-downgrade"></iframe> -->
</div>
<div class="col-md-4 mb-3 mb-md-0" data-aos="fade-left">
<form id="contactForm" action="contact.php" method="POST">
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1"><i class="bi bi-person-fill"></i></span>
<input type="text" id="name" name="name" class="form-control" placeholder="Nom Prénom"
aria-label="Nom Prénom" aria-describedby="basic-addon2" required>
</div>
<!-- Email address input -->
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">#</span>
<input type="text" id="email" name="email" class="form-control" placeholder="Email"
aria-label="email" aria-describedby="basic-addon1" required>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1"><i class="bi bi-telephone-fill"></i></span>
<input type="text" id="phone" name="phone" class="form-control" placeholder="Téléphone"
aria-describedby="basic-addon2" required>
</div>
<!-- Message input -->
<div class="mb-3">
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
placeholder="Decrivez le plus possible votre projet" name="message" required></textarea>
</div>
<!-- Form submit button -->
<div class="d-grid">
<button class="btn btn-primary btn-lg" name="send" type="submit">Submit</button>
</div>
</form>
</div>
</div>
</div>
</div>
<footer style="background-color: #2c2c2c;">
<div class="container" style="padding: 5%;">
<div class="row justify-content-between gx-4 gx-lg-5">
<div class="col-md-4 mb-3 mb-md-0" data-aos="fade-right">
<h6 style="color: white;"> Développeur Informatique Indépendant</h6>
<p class="grisclaire">Développeur Web front & back-end & Webdesigner freelance, je suis à votre
disposition pour répondre à
tout type
de projets de création de sites internet, de développement spécifique ou d'applications web.
</p>
<p class="grisclaire">Passionné par les technologies liées au Web, je mets mes compétences au
service de vos besoins dans
divers
domaines.</p>
</div>
<div class="col-md-4 mb-3 mb-md-0 " data-aos="fade-left">
<h6 style="color: white;"> Mathieu CRÉVOULIN</h6></br>
<a class="grisclaire footertext" href="https://goo.gl/maps/XD9CrQDL9WXZWrWV6" style="margin-bottom: 0; text-decoration: none;"> <i class="bi bi-geo-alt"> 45, allée
des Grives 83390 Cuers </i></a></br>
<a href="https://api.whatsapp.com/send?phone=33651289271" class="grisclaire footertext" style="margin-bottom: 0; text-decoration: none;"> <i class="bi bi-whatsapp"></i> (+33)
6.15.42.10.45</a>
<p class="grisclaire footertext" style="margin-bottom: 0;"> <i class="bi bi-envelope-fill"></i>
contact#mcrevoulin.com </p>
<p class="grisclaire footertext" style="margin-bottom: 0;"><i class="bi bi-link"></i>
www.mathieu-crevoulin.com</p>
</div>
</div>
</footer>
<script src="https://unpkg.com/aos#next/dist/aos.js"></script>
<script>
AOS.init();
$(document).ready(function(){
$('#contactForm').submit(function(e){
e.preventDefault();
const $this = $(this);
// disable submit button
const $button = $(this).find('button[type="submit"]').text('Submit...').attr('disabled', 'disabled');
// send message
$.ajax({
type: 'POST',
url: 'contact.php',
data: $this.serialize(),
success: function(data){
alert("E-mail envoyé avec succès ! Merci pour votre message ! Une réponse vous sera apportée dans les plus brefs délais.");
$this[0].reset(); // reset form
},
error: function(jqXHR, textStatus, errorThrown){
alert('An error occurred. Please try again')
},
complete: function(jqXHR, textStatus){
// enable submit button
$button.text('Submit').removeAttr('disabled');
}
})
})
});
</script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.6.0/jquery.min.js" integrity="sha512-894YE6QWD5I59HgZOGReFYm4dnWc1Qt5NtvYSaNcOP+u1T9qYdvdihz0PPSiiqn/+/3e7Jo4EaG7TubfWGUrMQ==" crossorigin="anonymous" referrerpolicy="no-referrer"></script>
<script src="js/javascript.js"></script>
<script src="https://cdn.jsdelivr.net/npm/#popperjs/core#2.11.5/dist/umd/popper.min.js" integrity="sha384-Xe+8cL9oJa6tN/veChSP7q+mnSPaj5Bcu9mPX5F5xIGE0DVittaqT5lorf0EI7Vk" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0/dist/js/bootstrap.min.js" integrity="sha384-ODmDIVzN+pFdexxHEHFBQH3/9/vQ9uori45z4JjnFsRydbmQbmL5t1tQ0culUzyK" crossorigin="anonymous"></script>
</body>
</html>
I would like to do the same so that after sending an email there is an alert that appears as in the example I showed (without loading the page or sending to a new page). I tried to create a new page with an alert but I wish its done like in the example I showed. How should I do?
You can achieve this using AJAX. Try this
contact.php file
if(isset($_POST["send"])){
$body = $_POST['message'];
$name = $_POST['name'];
$phone = $_POST['phone'];
$email = $_POST['email'];
$mail = new PHPMailer(true);
$mail->isSMTP();
$mail->Host = 'smtp.gmail.com';
$mail->SMTPAuth = true;
$mail->Username = 'mymail#mail.com';
$mail->Password = 'psw';
$mail->SMTPSecure = PHPMailer::ENCRYPTION_SMTPS; //Enable implicit TLS encryption
$mail->Port = 465;
$mail->setFrom('mymail#mail.com');
$mail->addAddress($_POST["email"]);
$mail->isHTML(true);
$mail->Subject = 'Projet web';
$mail->Body = "Message:" . $body . "<br>Phone number: " . $phone . "<br>Name: " . $name . "<br>Mail: " . $email;
$mail->send();
// header("Location: http://127.0.0.1/test2/confirmmail.html#scrollspyHeading7");
echo 'sent';
exit;
}
index.php
<div class="col-md-4 mb-3 mb-md-0" data-aos="fade-left">
<form id="contactForm" action="contact.php" method="POST">
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1"><i class="bi bi-person-fill"></i></span>
<input type="text" id="name" name="name" class="form-control" placeholder="Nom Prénom"
aria-label="Nom Prénom" aria-describedby="basic-addon2" required>
</div>
<!-- Email address input -->
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1">#</span>
<input type="text" id="email" name="email" class="form-control" placeholder="Email"
aria-label="email" aria-describedby="basic-addon1" required>
</div>
<div class="input-group mb-3">
<span class="input-group-text" id="basic-addon1"><i class="bi bi-telephone-fill"></i></span>
<input type="text" id="phone" name="phone" class="form-control" placeholder="Téléphone"
aria-describedby="basic-addon2" required>
</div>
<!-- Message input -->
<div class="mb-3">
<textarea class="form-control" id="exampleFormControlTextarea1" rows="3"
placeholder="Decrivez le plus possible votre projet" name="message" required></textarea>
</div>
<!-- Form submit button -->
<div class="d-grid">
<button class="btn btn-primary btn-lg" name="send" type="submit">Submit</button>
</div>
</form>
</div>
Add this before the closing body tag. For submitting the form asynchronously
<script>
$(document).ready(function(){
$('#contactForm').submit(function(e){
e.preventDefault();
const $this = $(this);
// disable submit button
const $button = $(this).find('button[type="submit"]').text('Submit...').attr('disabled', 'disabled');
// send message
$.ajax({
type: 'POST',
url: 'contact.php',
data: $this.serialize(),
success: function(data){
alert("E-mail envoyé avec succès ! Merci pour votre message ! Une réponse vous sera apportée dans les plus brefs délais.");
$this[0].reset(); // reset form
},
error: function(jqXHR, textStatus, errorThrown){
alert('An error occurred. Please try again')
},
complete: function(jqXHR, textStatus){
// enable submit button
$button.text('Submit').removeAttr('disabled');
}
})
})
})
</script>

Text from database overflow bootstrap container

I'm trying to get a text from the database but it overflows it's container. I tried putting a lot of lorem ipsum in the original code without the database info and it works fine.
This is what happen when I get the info directly from the database:
And this is a native lorem ipsum in the html file:
This is my html code:
<div class="col-md-8">
<div class="row">
<?php
$query = $mysqli->query("SELECT id,title,preview,author,timepost FROM news ORDER BY timepost DESC LIMIT 3");
$i = 1;
while($array = $query->fetch_array())
{
$date = DateTime::createFromFormat("Y-m-d H:i:s",$array['timepost']); ?>
<div class="col-md-12 mb-3" style="cursor: default;" id="<?php echo 'newsJunebia' . $i; $i++; ?>">
<div class="row">
<div class="col-md-12 bg-negro text-white rounded-top">
<strong><?= $array['title']; ?></strong>
</div>
</div>
<div class="row">
<div class="col-md-8 bg-negro-opacity text-naranja">
<small><em>Publicado el <?=$date->format('d');?> de <?= $date->format('F') ?>o del <?= $date->format('Y'); ?> a las <?= $date->format('H:i') ?></em></small>
</div>
<div class="col-md-4 bg-negro-opacity text-naranja d-flex flex-row-reverse">
<small><em>Autor: <?= $array['author']; ?></em></small>
</div>
</div>
<div class="row">
<div class="col-md-12 bg-negro-opacity text-white">
<p><?php echo $array['preview']; ?></p>
</div>
</div>
<div class="row">
<div class="col-md-12 bg-negro-opacity text-naranja rounded-bottom text-center">
<span style="cursor: pointer;" class="font-weight-bold font-italic text-naranja plusNews">Ver la noticia completa</span>
</div>
</div>
</div>
<?php } ?>
This is the form from where I save this info:
<div class="row">
<div class="col-md-12 mt-4">
<div class="card">
<div class="card-header bg-negro text-white">
<h5 class="card-title text-center">Agregar noticia</h5>
</div>
<form class="form" role="form" method="POST" id="form-news">
<input type="hidden" name="dblanguage" value="es_LA">
<div class="card-body bg-gris text-naranja font-weight-bold">
<div class="form-group">
<label for="newsType">Categoría de la noticia</label>
<select class="custom-select" id="newsType" name="newsType" disabled>
<option>Noticia Junebia</option>
</select>
</div>
<div class="form-group">
<label for="newsTitle">Título de la noticia (<span id="maxCharTitle">60</span> caracteres restantes)</label>
<input type="text" name="newsTitle" id="newsTitle" class="form-control" maxlength="60">
</div>
<div class="form-group">
<label for="newsPreview">Texto de vista previa (<span id="maxChar">120</span> caracteres restantes)</label>
<textarea type="text" name="newsPreview" id="newsPreview" class="form-control" maxlength="100"></textarea>
</div>
<div class="form-group">
<label for="newsContent">Contenido de la noticia</label>
<textarea id="newsContent" name="newsContent" class="form-control"></textarea>
</div>
<input type="hidden" name="username" value="<?= $_SESSION['userName'] ?>">
</div>
<div class="container-fluid justify-content-center d-flex bg-gris">
<button type="submit" class="btn btn-naranja btn-lg mb-2" id="btnAgregar">Agregar</button>
</div>
</form>
</div>
</div>
This is my php file to handle that form:
require_once('../database.php');
if(!isBanned() && isAdmin())
{
if(isset($_POST['newsTitle']))
{
$newsTitle = $_POST['newsTitle'];
$newsPreview = $_POST['newsPreview'];
$newsContent = $_POST['newsContent'];
$newsAuthor = $_POST['username'];
$newsTime = date('Y-m-d H:i:s');
$stmt = $mysqli->prepare("INSERT INTO news(title,preview,content,author,timepost) VALUES(?,?,?,?,?)");
$stmt->bind_param('sssss',$newsTitle,$newsPreview,$newsContent,$newsAuthor,$newsTime);
$stmt->execute();
echo true;
}
else
{
echo false;
}
}
else
{
echo false;
}
I'm using bootstrap 4.1
You just need a space and everything will be fine.
But if your text is looks like as you fetch. You can just try the following css with parent div of text:
word-break: break-all;

Problems to get ReCaptcha work with formhandler.php

I'm trying to add a ReCaptcha into the form. I use a formhandler.php with an error.php and success.php page.
I've put this code
<?php
if(isset($_POST['submit'])){
$url = 'https://google.com/recaptcha/api/siteverify';
$privatekey = "xxx";
$response = file_get_contents($url."?secret=".$privatekey."&response=".$_POST['g-recaptcha-response']."&remoteip=".$_SERVER['REMOTE_ADDR']);
$data = json_decode($response);
if(isset($data->success) AND $data->success==true) {
header('Location: success.php');
}else{
header('Location: error.php?CaptchaFail=True');
}
}
?>
into my formhandler.php. If I don't tick the ReCaptcha, my error.php works. But I still get the error page if I used ReCaptcha.
I'm not good at php and I guess I have an mistake somewhere.
This is the whole code from formhandler.php which I use:
<?php
if(isset($_POST['email'])) {
$url = 'https://google.com/recaptcha/api/siteverify';
$privatekey = "xxxx";
$response = file_get_contents($url."?secret=".$privatekey."&response=".$_POST['g-recaptcha-response']."&remoteip=".$_SERVER['REMOTE_ADDR']);
$data = json_decode($response);
$email_to = "xxx";
$email_subject = "Kontaktanfrage - ec-parts.de";
$email = $_POST['email'];
$name = $_POST['name'];
$phone = $_POST['phone'];
$message = $_POST['message'];
$checkboxaccept = $_POST['checkboxaccept'];
$email_message = "Nachricht:\n\n";
function clean_string($string) {
$bad = array("content-type","bcc:","to:","cc:","href");
return str_replace($bad,"",$string);
}
function getUserIpAddr()
{
if (!empty($_SERVER['HTTP_CLIENT_IP']))
{
return $_SERVER['HTTP_CLIENT_IP'];
}
else if (!empty($_SERVER['HTTP_X_FORWARDED_FOR']))
{
return $_SERVER['HTTP_X_FORWARDED_FOR'];
}
else
{
return $_SERVER['REMOTE_ADDR'];
}
}
$email_message .= "Name: ".clean_string($name)."\n";
$email_message .= "Email: ".clean_string($email)."\n";
$email_message .= "Telefon: ".clean_string($phone)."\n";
$email_message .= "Nachricht: ".clean_string($message)."\n";
$headers = "MIME-Version: 1.0" . "\r\n";
$headers .= "Content-type:text/plain;charset=UTF-8" . "\r\n";
$headers .= 'From: '.$email. "\r\n";
if (#mail($email_to, $email_subject, $email_message, $headers, $checkboxaccept, $response))
if (isset($data->success) AND $data->success==true) {
header('Location: success.php');
} else {
header('Location: error.php?CaptchaFail=True');
}
}
?>
Maybe it's because of the code if (isset($data->success) AND $data->success==true). I'm not sure where to put it. I'm still a beginner in PHP...
I only want formhandler.php to check if I used the ReCaptcha. I googled a lot of different codes but this one almost work.
If you need, you can test the form here: contact form
EDIT:
I've changed the code using the solution from this post:
My formhandler.php:
<?php
function validate_email_address($email = false) {
return (preg_match('/^[^#\s]+#([-a-z0-9]+\.)+[a-z]{2,}$/i', $email))? true : false;
}
function remove_email_injection($field = false) {
return (str_ireplace(array("\r", "\n", "%0a", "%0d", "Content-Type:", "bcc:","to:","cc:"), '', $field));
}
// Set email variables
$email_to = "xxx";
$email_subject = "Kontaktanfrage - ec-parts.de";
// Set required fields
$required_fields = array('email', 'name', 'message', 'checkboxaccept');
// set error messages
$error_messages = array(
'email' => 'Bitte geben Sie eine gültige E-mailadresse an.',
'name' => 'Bitte geben Sie Ihren Namen an.',
'message' => 'Bitte schreiben Sie uns, worum es in Ihrer Anfrage geht.',
'checkboxaccept' => 'Bitte klicken Sie die Checkbox an, wenn Sie fortsetzen wollen.'
);
// Set form status
$form_complete = FALSE;
// configure validation array
$validation = array();
// boolean variable to validate recaptcha
$valid_recaptcha = false;
if(isset($_POST['submit'])){
// First validate recaptcha
$url = 'https://www.google.com/recaptcha/api/siteverify';
$privatekey = "xxx";
$response = file_get_contents($url."?secret=".$privatekey."&response=".$_POST['g-recaptcha-response']."&remoteip=".$_SERVER['REMOTE_ADDR']);
$data = json_decode($response);
if($data->success) {
$valid_recaptcha = true;
}
if($valid_recaptcha){
// now process your form here. sanitize and validate input fields
// Sanitise POST array
foreach($_POST as $key => $value){
$_POST[$key] = remove_email_injection(trim($value));
}
// Loop into required fields and make sure they match our needs
foreach($required_fields as $field) {
// the field has been submitted?
if(!array_key_exists($field, $_POST)){
array_push($validation, $field);
}
// check there is information in the field?
if($_POST[$field] == ''){
array_push($validation, $field);
}
// validate the email address supplied
if($field == 'email'){
if(!validate_email_address($_POST[$field])){
array_push($validation, $field);
}
}
}
// basic validation result
if(count($validation) == 0) {
// Prepare our content string
$email_content = 'Neue Kontaktanfrage: ' . "\n\n";
// simple email content
foreach($_POST as $key => $value){
if($key != 'submit' && $key != 'g-recaptcha-response') $email_content .= $key . ': ' . $value . "\n";
}
// if validation passed ok then send the email
mail($email_to, $email_subject, $email_content);
// Update form switch
$form_complete = TRUE;
}
}
}
?>
My kontakt.php:
<!DOCTYPE html>
<html >
<head>
<!-- Site made with Mobirise Website Builder v4.5.2, https://mobirise.com -->
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="generator" content="Mobirise v4.5.2, mobirise.com">
<meta name="viewport" content="width=device-width, initial-scale=1, minimum-scale=1">
<link rel="shortcut icon" href="assets/images/favicon-1.gif" type="image/x-icon">
<meta name="description" content="ec - exclusive carparts GmbH Berlin, Der Tuning Spezialist aus Berlin. Kontaktdaten.">
<title>ec - exclusive carparts GmbH Berlin. Kontakt. TÜV- Profi, Brabus Händler Berlin.</title>
<link rel="stylesheet" href="assets/bootstrap-material-design-font/css/material.css">
<link rel="stylesheet" href="assets/et-line-font-plugin/style.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Montserrat:400,700">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Raleway:100,100i,200,200i,300,300i,400,400i,500,500i,600,600i,700,700i,800,800i,900,900i">
<link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Lora:400,700,400italic,700italic&subset=latin">
<link rel="stylesheet" href="assets/tether/tether.min.css">
<link rel="stylesheet" href="assets/bootstrap/css/bootstrap.min.css">
<link rel="stylesheet" href="assets/soundcloud-plugin/style.css">
<link rel="stylesheet" href="assets/dropdown/css/style.css">
<link rel="stylesheet" href="assets/theme/css/style.css">
<link rel="stylesheet" href="assets/mobirise3-blocks-plugin/css/style.css">
<link rel="stylesheet" href="assets/mobirise/css/mbr-additional.css" type="text/css">
<meta name="rating" content="General" />
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<meta name="language" content="de" />
<meta name="keywords" content="exclusive carparts Berlin,ec-parts,Kontakt,Berlin" />
<meta name="publisher" content="Website by inventmedia. http://www.inventmedia.de" />
<meta name="robots" content="all,index,follow" />
<script src='https://www.google.com/recaptcha/api.js'></script>
</head>
<body>
<section id="menu-3g" data-rv-view="463">
<nav class="navbar navbar-dropdown navbar-fixed-top">
<div class="container">
<div class="mbr-table">
<div class="mbr-table-cell">
<div class="navbar-brand">
<img src="assets/images/ecparts-logo-menu-big-520x128.png" alt="ec - exclusive carparts Berlin" title="ec - exclusive carparts Berlin">
</div>
</div>
<div class="mbr-table-cell">
<button class="navbar-toggler pull-xs-right hidden-md-up" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
<div class="hamburger-icon"></div>
</button>
<ul class="nav-dropdown collapse pull-xs-right nav navbar-nav navbar-toggleable-sm" id="exCollapsingNavbar"><li class="nav-item"><a class="nav-link link" href="index.php">STARTSEITE</a></li><li class="nav-item dropdown"><a class="nav-link link" href="auto-folierung-fahrzeug-komplettbeklebung-berlin.php" aria-expanded="false">FOLIERUNG</a></li><li class="nav-item dropdown"><a class="nav-link link" href="portfolio.php" aria-expanded="false">PORTFOLIO</a></li><li class="nav-item"><a class="nav-link link" href="service-partner.php" aria-expanded="false">SERVICE & PARTNER</a></li>
<li class="nav-item"><a class="nav-link link" href="tuev-sondereintragung.php" aria-expanded="false">TÜV</a></li><li class="nav-item"><a class="nav-link link" href="produkte.php" aria-expanded="false">PRODUKTE & LEISTUNGEN</a></li><li class="nav-item"><a class="nav-link link" href="kontakt.php" aria-expanded="false">KONTAKT</a></li></ul>
<button hidden="" class="navbar-toggler navbar-close" type="button" data-toggle="collapse" data-target="#exCollapsingNavbar">
<div class="close-icon"></div>
</button>
</div>
</div>
</div>
</nav>
</section>
<section class="engine">web builder</section><section class="mbr-section article mbr-parallax-background mbr-after-navbar" id="msg-box8-3h" data-rv-view="465" style="background-image: url(assets/images/start-2-836x576.jpg); padding-top: 200px; padding-bottom: 200px;">
<div class="mbr-overlay" style="opacity: 0.5; background-color: rgb(34, 34, 34);">
</div>
<div class="container">
<div class="row">
<div class="col-md-8 col-md-offset-2 text-xs-center">
</div>
</div>
</div>
</section>
<div id="header3-3i" custom-code="true" data-rv-view="468"><section class="mbr-section mbr-section__container article" data-rv-view="1005" style="background-color: rgb(239, 239, 239); padding-top: 20px; padding-bottom: 20px;">
<div class="container">
<div class="row">
<div class="col-xs-12">
<h1 class="card-header mbr-editable-content" style="text-align: left; font-family: Oswald, sans-serif; font-size: 32px; color: rgb(34, 34, 34);">Kontakt</h1>
</div>
</div>
</div>
</section></div>
<div id="content6-3o" custom-code="true" data-rv-view="469"><section class="mbr-section article mbr-section__container" data-rv-view="327" style="background-color: rgb(239, 239, 239); padding-top: 20px; padding-bottom: 20px; border-bottom: 1px solid #ccc;">
<div class="container">
<div class="row">
<div class="col-xs-12 col-md-6 lead mbr-editable-full"><p><strong>ec exclusive carparts GmbH
</strong></p>
<p>Geschäftsführer: Mirko Schröter
</p>
<p>Blücherstrasse 60
</p><p>10961 Berlin</p><p><br></p><p>Fon: +49 (0) 30 36 40 67 36
</p><p>Fax: +49 (0) 30 36 40 67 35
</p><p>Internet: www.ec-parts.de
</p><p>E-Mail: info#ec-parts.de</p></div>
<div class="col-xs-12 col-md-6 lead mbr-editable-full">
<p><strong>Öffnungszeiten: </strong>
</p><p>Mo. - Fr.: 10 Uhr - 18.30 Uhr
</p><p>Sa.: nach Vereinbarung</p></div>
</div>
</div>
</section></div>
<section class="mbr-section extForm1 mbr-parallax-background" id="extForm1-5m" data-rv-view="470" style="background-image: url(assets/images/folierung-836x576.jpg); padding-top: 50px; padding-bottom: 50px;">
<div class="mbr-overlay" style="opacity: 0.8; background-color: rgb(255, 255, 255);">
</div>
<div class="mbr-table mbr-table-full">
<div class="mbr-table-cell">
<div class="container">
<div class="row">
<div class="mbr-table-md-up">
<!-- & -->
<div class="mbr-table-cell col-md-7 text-xs-center text-md-left">
<h2 class="display-2 h-black"><span style="font-weight: normal;">Kontaktformular</span></h2>
<?php
if(isset($_POST['submit'])){
if(!$valid_recaptcha){
// error
?>
<div class="col-md-12" style="margin-left: 200px;" align="center">ReCAPTCHA fehlgeschlagen, bitte versuchen Sie es erneut.</div><br />
<?php
}
}
?>
<div class="col-md-12" style="padding-left: 0px; padding-right: 0px;">
<?php if($form_complete === FALSE): ?>
<form action="formhandler.php" method="post">
<div class="col-xs-6">
<input type="text" class="form-control" name="name" required data-form-field="Name" placeholder="Name*" value="<?php echo isset($_POST['name'])? $_POST['name'] : ''; ?>" /><?php if(in_array('name', $validation)): ?><span class="error"><?php echo $error_messages['name']; ?> </span><?php endif; ?>
</div>
<div class="col-xs-6" style="padding-left: 15px">
<input type="text" class="form-control" name="email" required data-form-field="Email" placeholder="E-mail*" value="<?php echo isset($_POST['email'])? $_POST['email'] : ''; ?>" /><?php if(in_array('email', $validation)): ?><span class="error"><?php echo $error_messages['email']; ?> </span><?php endif; ?>
</div>
<div class="col-xs-12">
<input type="text" class="form-control" name="phone" required data-form-field="Phone" placeholder="Telefon*">
</div>
<div class="col-xs-12">
<textarea class="form-control" name="message" rows="7" data-form-field="Message" style="resize:none" placeholder="Nachricht" value="<?php echo isset($_POST['message'])? $_POST['message'] : ''; ?>" /><?php if(in_array('message', $validation)): ?><span class="error"><?php echo $error_messages['message']; ?> </span><?php endif; ?></textarea>
</div>
<div class="col-xs-12">
<label class="lead">
<p><input style="margin-bottom: 0;" type="checkbox" name="checkboxaccept" required value="<?php echo isset($_POST['checkboxaccept'])? $_POST['checkboxaccept'] : ''; ?>" /><?php if(in_array('checkboxaccept', $validation)): ?><span class="error"><?php echo $error_messages['checkboxaccept']; ?> </span><?php endif; ?>
<span style="color: #1f008f;">*</span>Ich stimme zu, dass meine Angaben aus dem Kontaktformular zur Beant­wortung meiner Anfrage erhoben und verar­beitet werden. Die Daten werden nach abge­schlossener Bear­beitung Ihrer Anfrage gelöscht.</p>
<p><em>Hinweis: Sie können Ihre Einwilligung jederzeit für die Zukunft per E-Mail an info#ec-parts.de widerrufen. Detaillierte Informationen zum Umgang mit Nutzerdaten finden Sie in unserer Datenschutzerklärung.</em></p></label>
</div>
<div class="col-xs-12"><div class="g-recaptcha" data-sitekey="6Lc1TlwUAAAAAMxGXW7AEsy3w5asFtZKi8cvtuxL"></div></div>
<div class="col-xs-12 buttons_wrap" style="margin-top: 10px;"><button type="submit" class="btn btn-primary">Nachricht senden</button></div>
</form>
<?php else: ?>
<div class="row">
<div class="col-md-12 parent">
<div class="col-md-12 col-lg-12" style="padding: 0;">
<div class="intro-box right" style="margin: 10px 0;">
<div class="content alert alert-success" style="padding: 10px 10px 10px 10px;">
<h4 class="text-right mbr-editable-content">Vielen Dank für Ihre Nachricht!</h4>
<p class="mbr-section-text lead mbr-editable-content">Wir werden uns umgehend bei Ihnen melden.</p>
</div>
</div>
</div>
</div>
</div>
<!--<script type="text/javascript">
setTimeout('ourRedirect()',5000)
function ourRedirect(){
location.href='http://web6.server.inventmedia.de/ec/kontakt.php'
}
</script>-->
<?php endif; ?>
</div>
</div>
<div class="mbr-table mbr-valign-top col-md-5">
<div class="mbr-figure"><img src="assets/images/mirko-1000x961.jpg" class="img-thumbnail central-image"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="mbr-section mbr-section-nopadding" id="map1-51" data-rv-view="480">
<div class="mbr-map"><iframe frameborder="0" style="border:0" src="https://www.google.com/maps/embed/v1/place?key=xxx&q=place_id:ChIJ8TAx5OdQqEcRUK_4PR7srUk" allowfullscreen=""></iframe></div>
</section>
<section class="mbr-slider mbr-section mbr-section-nopadding carousel slide extTestimonials1 extTestimonials3 extTestimonials5" data-ride="carousel" data-keyboard="false" data-wrap="true" data-interval="5000" data-pause="false" id="extTestimonials5-3k" data-rv-view="482" style="background-color: rgb(255, 255, 255); padding-top: 0px; padding-bottom: 0px;">
<div class="mbr-section__container mbr-section__container--middle">
<div class="container">
<div class="row">
<div class="col-xs-12 text-xs-center">
</div>
</div>
</div>
</div>
<div class="container boxed-slider">
<div>
<div class="carousel-inner" role="listbox" data-visible="6">
<div class="carousel-item active">
<div class="row">
<div class="col-md-12">
<div class="wrap-img"><img src="assets/images/bastuck-226x118.png" alt="Bastuck" title="Bastuck"></div>
</div>
</div>
</div><div class="carousel-item">
<div class="row">
<div class="col-md-12">
<div class="wrap-img"><img src="assets/images/barracuda-226x118.png" alt="Barracuda" title="Barracuda"></div>
</div>
</div>
</div><div class="carousel-item">
<div class="row">
<div class="col-md-12">
<div class="wrap-img"><img src="assets/images/bbs-226x118.png" alt="BBS" title="BBS"></div>
</div>
</div>
</div><div class="carousel-item">
<div class="row">
<div class="col-md-12">
<div class="wrap-img"><img src="assets/images/breyton-226x118.png" alt="Breyton" title="Breyton"></div>
</div>
</div>
</div><div class="carousel-item">
<div class="row">
<div class="col-md-12">
<div class="wrap-img"><img src="assets/images/oz-226x118.png" alt="OZ Racing" title="OZ Racing"></div>
</div>
</div>
</div><div class="carousel-item">
<div class="row">
<div class="col-md-12">
<div class="wrap-img"><img src="assets/images/hr-226x118.png" alt="H&R" title="H&R"></div>
</div>
</div>
</div><div class="carousel-item">
<div class="row">
<div class="col-md-12">
<div class="wrap-img"><img src="assets/images/kn-226x118.png" alt="K&N" title="K&N"></div>
</div>
</div>
</div><div class="carousel-item">
<div class="row">
<div class="col-md-12">
<div class="wrap-img"><img src="assets/images/lowtec-226x118.png" alt="Lowtec" title="Lowtec"></div>
</div>
</div>
</div>
</div>
</div>
</div>
</section>
<section class="mbr-section mbr-section-md-padding mbr-footer footer1" id="contacts1-3l" data-rv-view="510" style="background-color: rgb(34, 34, 34); padding-top: 90px; padding-bottom: 90px;">
<div class="container">
<div class="row">
<div class="mbr-footer-content col-xs-12 col-md-3">
<div><img src="assets/images/ec-parts-logo-big-128x165.png" alt="ec - exclusive carparts Berlin" title="ec - exclusive carparts Berlin"></div>
</div>
<div class="mbr-footer-content col-xs-12 col-md-3">
<p><strong>EC-Parts</strong><br>
Startseite<br>
Kontakt<br>Datenschutz<br>Impressum</p>
</div>
<div class="mbr-footer-content col-xs-12 col-md-3">
<p><strong>Kontakt</strong><br>
Email: info#ec-parts.de<br>
Fon: +49 (0) 30 36 40 67 36<br>
Fax: +49 (0) 30 36 40 67 35<br><br>
Öffnungszeiten:
<br>Mo. - Fr.: 10 Uhr - 18.30 Uhr
<br>Sa.: nach Vereinbarung<br></p>
</div>
<div class="mbr-footer-content col-xs-12 col-md-3">
<p><strong>Anschrift</strong><a class="text-info" href="https://mobirise.com/"><br></a>ec exclusive carparts Berlin Autotuning<br>
Blücherstrasse 60<br>10961 Berlin<br></p>
</div>
</div>
</div>
</section>
<script src="assets/web/assets/jquery/jquery.min.js"></script>
<script src="assets/tether/tether.min.js"></script>
<script src="assets/bootstrap/js/bootstrap.min.js"></script>
<script src="assets/smooth-scroll/smooth-scroll.js"></script>
<script src="assets/touch-swipe/jquery.touch-swipe.min.js"></script>
<script src="assets/jarallax/jarallax.js"></script>
<script src="assets/bootstrap-carousel-swipe/bootstrap-carousel-swipe.js"></script>
<script src="assets/dropdown/js/script.min.js"></script>
<script src="assets/theme/js/script.js"></script>
<script src="assets/mobirise3-blocks-plugin/js/script.js"></script>
<div id="scrollToTop" class="scrollToTop mbr-arrow-up"><a style="text-align: center;"><i class="mbr-arrow-up-icon"></i></a></div>
</body>
</html>
I am not sure, why this doesn't work. I was trying to copy the whole code step by step. I can see the success message and the form is missing.

Wrapping tags around every two items not working php

I am trying to wrap a div around every two elements I am looping with php but I am not getting the desired output.
Below my PHP code:
<?
$diensten = "SELECT * FROM snm_content WHERE catid = 9 AND state = 1 ORDER BY ordering";
$dienstencon = $conn->query($diensten);
$tel = 1;
while($diensten = $dienstencon->fetch_assoc()){
if (strlen($diensten['introtext']) > 100){
$shortstr = substr($diensten['introtext'], 0, 100) . '...';
}else{
$shortstr = $diensten['introtext'];
}
//Wrap de slide in deze div elke 2 keer binnen de loop
if($tel % 2 == 1){
$dienstenslider .= '<div class="col-lg-12 col-md-12 col-sm-12">';
}
$dienstenslider .= '
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="serv-item pull-left">
<p class="ser-tit"><i class="pe-7s-notebook"></i>'.$diensten['title'].'</p>
<p class="ser-cont">
'.strip_tags($shortstr).'
</p>
Lees meer<i class="fa fa-angle-right"></i>
</div>
</div>';
if(($tel % 2) == 0){
$dienstenslider .= '</div> <div class="col-lg-12 col-md-12 col-sm-12">';
}
$tel++;
}
if(($tel % 2) != 0){
$dienstenslider .= '</div>';
}
echo $dienstenslider;
?>
And this is the output that I am getting from that code:
<div class="box ser-box large-width-box-w1 box-h1">
<div id="service-owl" class="owl-carousel owl-theme" style="opacity: 1; display: block;">
<div class="owl-wrapper-outer autoHeight" style="height: 272px;">
<div class="owl-wrapper" style="width: 3120px; left: 0px; display: block; transition: all 1000ms ease; transform: translate3d(0px, 0px, 0px);">
<div class="owl-item" style="width: 780px;">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="serv-item pull-left">
<p class="ser-tit"><i class="pe-7s-notebook"></i>Begeleiding Individueel</p>
<p class="ser-cont">
Begeleiding thuis is praktische hulp aan mensen die door problemen de grip op hun dagelijks leven...
</p>
Lees meer<i class="fa fa-angle-right"></i>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="serv-item pull-left">
<p class="ser-tit"><i class="pe-7s-notebook"></i>Verpleging</p>
<p class="ser-cont">
Thuis is de plek waar u het liefst wilt zijn. Daar voelt u zich het meest op uw gemak. In uw eige...
</p>
Lees meer<i class="fa fa-angle-right"></i>
</div>
</div>
</div>
</div>
<div class="owl-item" style="width: 780px;">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="serv-item pull-left">
<p class="ser-tit"><i class="pe-7s-notebook"></i>Hulp bij het huishouden</p>
<p class="ser-cont">
Als u door welke reden dan ook niet meer zelfstandig uw huishouden kunt voeren en hierbij (tijdel...
</p>
Lees meer<i class="fa fa-angle-right"></i>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="serv-item pull-left">
<p class="ser-tit"><i class="pe-7s-notebook"></i>Persoonlijke verzorging</p>
<p class="ser-cont">
Heeft u moeite met opstaan? Kunt u zichzelf steeds moeilijker verzorgen? Of geldt dit misschien v...
</p>
Lees meer<i class="fa fa-angle-right"></i>
</div>
</div>
</div>
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="serv-item pull-left">
<p class="ser-tit"><i class="pe-7s-notebook"></i>Hulp bij Dementie</p>
<p class="ser-cont">
in ontwikkeling
</p>
Lees meer<i class="fa fa-angle-right"></i>
</div>
</div>
</div>
<!-- Slider -->
</div>
</div>
</div>
</div>
</div>
<div class="owl-controls clickable">
<div class="owl-pagination">
<div class="owl-page active"><span class=""></span></div>
<div class="owl-page"><span class=""></span></div>
</div>
</div>
</div>
</div>
While this is what I want:
<div class="box ser-box large-width-box-w1 box-h1">
<div id="service-owl" class="owl-carousel owl-theme" style="opacity: 1; display: block;">
<div class="owl-wrapper-outer autoHeight" style="height: 297px;">
<div class="owl-wrapper" style="width: 3120px; left: 0px; display: block; transform: translate3d(-780px, 0px, 0px); transition: all 800ms ease;">
<div class="owl-item" style="width: 780px;">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="serv-item pull-left">
<p class="ser-tit"><i class="pe-7s-notebook"></i>Begeleiding Individueel</p>
<p class="ser-cont">
Begeleiding thuis is praktische hulp aan mensen die door problemen de grip op hun dagelijks leven...
</p>
Lees meer<i class="fa fa-angle-right"></i>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="serv-item pull-left">
<p class="ser-tit"><i class="pe-7s-notebook"></i>Verpleging</p>
<p class="ser-cont">
Thuis is de plek waar u het liefst wilt zijn. Daar voelt u zich het meest op uw gemak. In uw eige...
</p>
Lees meer<i class="fa fa-angle-right"></i>
</div>
</div>
</div>
</div>
<div class="owl-item" style="width: 780px;">
<div class="col-lg-12 col-md-12 col-sm-12">
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="serv-item pull-left">
<p class="ser-tit"><i class="pe-7s-notebook"></i>Persoonlijke verzorging</p>
<p class="ser-cont">
Heeft u moeite met opstaan? Kunt u zichzelf steeds moeilijker verzorgen? Of geldt dit misschien v...
</p>
Lees meer<i class="fa fa-angle-right"></i>
</div>
</div>
<div class="col-lg-6 col-md-6 col-sm-12">
<div class="serv-item pull-left">
<p class="ser-tit"><i class="pe-7s-notebook"></i>Hulp bij Dementie</p>
<p class="ser-cont">
in ontwikkeling
</p>
Lees meer<i class="fa fa-angle-right"></i>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- Slider -->
<div class="owl-controls clickable">
<div class="owl-pagination">
<div class="owl-page"><span class=""></span></div>
<div class="owl-page active"><span class=""></span></div>
</div>
</div>
</div>
</div>
How can I get that output? Even when there are an uneven amount of items being loaded?
This is what I am currently working on (the slider is not working without problems as you can see).
This is almost a copy of the website where the slider does work (the reason I am not copying that is because it is outdated/messy code).
The approach with modulo is correct, but you are writing duplicate opening tags.
the first usage is okay:
//Wrap de slide in deze div elke 2 keer binnen de loop
if($tel % 2 == 1){
$dienstenslider .= '<div class="col-lg-12 col-md-12 col-sm-12">';
}
The second usage you should only put a closing tag:
if(($tel % 2) == 0){
// the opening tag will be written in the first usage above. writing it here too results in duplicate opening tags
// $dienstenslider .= '</div><div class="col-lg-12 col-md-12 col-sm-12">';
$dienstenslider .= '</div>';
}
Then you have another usage outside your while loop. This looks okay too.
if(($tel % 2) != 0){
$dienstenslider .= '</div>';
}

Categories