Как я могу использовать некоторый PHP код в моем HTML внешне
Я создаю какое-то веб-приложение.
Вы заполняете заголовок и т. д., Вы получаете стилизованный пример, и я хочу экспортировать этот стилизованный пример в csv-лист, для которого у меня есть код, но я не могу реализовать его на своей html-странице.
Итак, как мне получить доступ к php-коду за пределами моего html-кода?
Что я уже пробовал:
Я посмотрел на te intwerbs, но не смог получить от него четкого ответа.
Один говорит, что это возможно, другой говорит, что это не так или только с сервером.
Это то, что я хочу сделать с выводом javascript.
[^]
вот мой код:
<pre><!DOCTYPE html>
<html>
<head>
<title>Adwords Applicatie</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<!-- beginning of style -->
<style>
body{
}
#inputWrapper{
margin:190px auto;
right:473.500;
width:620px;
height:100%;
}
#input1 {
width:100%;
height:75px;
border:solid black 1px;
margin-top:45px;
padding:0px;
word-wrap: break-word;
}
h3 {
padding:0px;
margin:0px;
font-family: arial,sans-serif;
color:#1a0dab;
text-align: left;
cursor: pointer;
font-size:18px;
}
p {
color:rgb(0, 102, 33);
font-size: 14px;
font-style: normal;
height: auto;
width: auto;
text-align: left;
display: block;
font-weight: 400px;
line-height: 16px;
padding: 0px;
margin:0px;
font-family: arial,sans-serif;
cursor: pointer;
word-wrap: break-word;
cursor:grab;
}
.text {
color:rgb(84, 84, 84);
font-size: 13px;
font-family: arial,sans-serif;
text-align: left;
word-wrap: break-word;
font-weight: 400;
line-height: 18.2px;
display: inline;
margin:0px;
padding:0px;
padding-right:25px;
cursor:grab;
}
/* Input4 */
/*Input section 4 is a wrapper around the input fields on the left side of the blocks
SORRY FOR THE CONFUSING TITLE BUT INPUTSECTION WITHOUT ANY NUMBERS IS THE LAST ONE*/
#inputsection{
margin: 0px;
padding:0px;
width:400px;
position: absolute;
top:570px;
left:100px;
}
#labelcontainer {
clear:right;
float: left;
width:100px;
display: inline-block;
margin-top:20px;
}
#inputcontainer{
width:250px;
clear: left;
display: inline-block;
}
.label{
display: block;
clear: right;
float: left;
margin-top: 10px;
padding:0px;
width:100%;
}
.inputfield{
display: block;
clear: right;
float: left;
margin-top: 10px;
padding:0px;
}
/* einde input 4 */
/* Input 2 */
/*Input section 2 is a wrapper around the input fields on the left side of the blocks*/
#inputsection2{
margin: 0px;
padding:0px;
width:400px;
position: absolute;
top:350px;
left:100px;
}
#labelcontainer2 {
clear:right;
float: left;
width:100px;
display: inline-block;
}
#inputcontainer2{
width:250px;
clear: left;
display: inline-block;
}
.label2{
display: block;
clear: right;
float: left;
margin-top: 10px;
padding:0px;
width:100%;
}
.inputfield2{
display: block;
clear: right;
float: left;
margin-top: 10px;
padding:0px;
}
/* Input 3 */
/*Input section 3 is a wrapper around the input fields on the left side of the blocks*/
#inputsection3{
margin: 0px;
padding:0px;
width:400px;
position: absolute;
top:475px;
left:100px;
}
#labelcontainer3 {
clear:right;
float: left;
width:100px;
display: inline-block;
}
#inputcontainer3{
width:250px;
clear: left;
display: inline-block;
}
.label3{
display: block;
clear: right;
float: left;
margin-top: 10px;
padding:0px;
width:100%;
}
.inputfield3{
display: block;
clear: right;
float: left;
margin-top: 10px;
padding:0px;
}
.logo{
padding: 0px;
margin: 0px;
width:20%;
height: 20%;
}
/*input field is actually block number 4 sorry*/
.inputfield{
background-color: #3CBC8D;
color: white;
}
.inputfield2{
background-color: #3CBC8D;
color: white;
}
.inputfield3{
background-color: #3CBC8D;
color: white;
}
.google{
margin:0px;
padding:0px;
border:0px;
position: absolute;
top:40px;
left:290px;
}
.button {
position: absolute;
top:700px;
}
</style>
<!-- end of style -->
</head>
<body>
<img class="logo" src="treelogo.png" />
<div id="inputWrapper"> <!-- wrapping the 4 inputsections blocks -->
<img class="google" src="achtergrond.png" />
<div id="input1">
<h3>Tree Online - Internet marketing bureau</h3>
<p>https://www.treeonline.nl/ </p>
<span class="text">Meer bezoekers? Meer klanten? Meer omzet? Tree Online is een
ervaren online marketing bureau met bewezen resultaten in diverse markten en branches.</span>
</div>
<div id="input1">
<h3 id="tekst2"></h3>
<p id="p2"></p>
<span id="span2" class="text"></span>
</div>
<div id="input1">
<h3 id="tekst3"></h3>
<p id="p3"></p>
<span id="span3" class="text"></span>
</div>
<div id="input1">
<h3 id="tekst4"></h3>
<p id="p4"></p>
<span id="span4" class="text"></span>
</div>
</div> <!-- end of input wrapper -->
<!-- input section for block 2 containing the html -->
<div id="inputsection2">
<div id="labelcontainer2">
<label class="label2" for="title2">Titel</label>
<label class="label2" for="slug2">Website url</label>
<label class="label2" for="description2">Beschrijving</label>
</div>
<div id="inputcontainer2">
<input class="inputfield2" id="title2" maxlength="60"/>
<input class="inputfield2" id="slug2"/>
<input class="inputfield2" id="description2" maxlength="160"/>
</div>
</div> <!-- input section2 close -->
<!-- input section for block 3 containing the html -->
<div id="inputsection3">
<div id="labelcontainer3">
<label class="label3" for="title3">Titel</label>
<label class="label3" for="slug3">Website url</label>
<label class="label3" for="description3">Beschrijving</label>
</div>
<div id="inputcontainer">
<input class="inputfield3" id="title3" maxlength="60" />
<input class="inputfield3" id="slug3"/>
<input class="inputfield3" id="description3" maxlength="160"/>
</div>
</div> <!-- input section 3 close -->
<!-- input section for block 4 containing the html -->
<div id="inputsection">
<div id="labelcontainer">
<label class="label" for="title">Titel</label>
<label class="label" for="slug">Website url</label>
<label class="label" for="description">Beschrijving</label>
</div>
<div id="inputcontainer">
<form action='' method='post'>
<label></label><br><input class="inputfield" id="title" maxlength="60" type='text' name='titlephp' value=''>
<label></label><br><input type='text' name='slugphp' value='' class="inputfield" id="slug">
<label></label><br><input type='text' name='descriptionphp' value=''class="inputfield" id="description" maxlength="160">
<input class="button" type='submit' name='submit' value='Submit'>
</form>
</div> <!-- input section4 close -->
<!-- php section goes over here -->
<!-- end of php section -->
<?php
if(isset($_POST['submit'])){
//collect form data
$titlephp = $_POST['titlephp'];
$slugphp = $_POST['slugphp'];
$descriptionphp = $_POST['descriptionphp'];
//check name is set
if($titlephp ==''){
$error[] = 'Title is required';
}
//if no errors carry on
if(!isset($error)){
# Title of the CSV
$Content = "Title, slug,description\n";
//set the data of the CSV
$Content .= "$titlephp, $slugphp,$descriptionphp\n";
# set the file name and create CSV file
$FileName = "formdata-".date("d-m-y-h:i:s").".csv";
header('Content-Type: application/csv');
header('Content-Disposition: attachment; filename="' . $FileName . '"');
echo $Content;
exit();
}
}
//if their are errors display them
if(isset($error)){
foreach($error as $error){
echo "<p style='color:#ff0000'>$error</p>";
}
}
?>
<!-- add javscript here -->
<script>
//code voor input nummer 2
$("#title2").on('change input',function(){
$('#tekst2').html($(this).val());
})
$("#slug2").on('change input',function(){
$('#p2').html($(this).val());
})
$("#description2").on('change input',function(){
$('#span2').html($(this).val());
})
// code voor input nummer 3
$("#title3").on('change input',function(){
$('#tekst3').html($(this).val());
})
$("#slug3").on('change input',function(){
$('#p3').html($(this).val());
})
$("#description3").on('change input',function(){
$('#span3').html($(this).val());
})
//code voor input nummer 4
$("#title").on('change input',function(){
$('#tekst4').html($(this).val());
})
$("#slug").on('change input',function(){
$('#p4').html($(this).val());
})
$("#description").on('change input',function(){
$('#span4').html($(this).val());
})
</script>
</body>
</html>