I currently have a small project which uses PHP pages on Apache, hosted on a Raspberry Pi. However, I feel that using AJAX to send JSON to different PHP pages, then having those pages do something in response is just messy.
I have so many files, remembering all my variable names, functions, and file names just causes a headache.
Why is this the preferred way to code PHP?
I would rather just create one PHP page which has multiple classes/functions. Then use JQuery to Load() static HTML 'forms'. So a web interaction would look like this...
<?php
//some server-side functions
?>
<html>
<head>
<script>
//some Jquery to load your seperate html forms
</script>
</head>
<body>
<div id="html forms get loaded into here">
</div>
</body>
</html>
I am very new to PHP and very partial to ASP/.NET. Obviously this is terrible if you want to create large sites accessed by lots of people... but for a small project, is this still a bad idea?
Related
I'm exploring several types of programming style in web designing. But it suddenly came to my mind. Can a PHP file be read using JQuery/JavaScript on a HTML file. An example. I would open login.php using $.ajax inside the index.html page. Take note about the extensions in the example
Calvin!, your question really is unclear!
And is denoting very few efforts...
Based on the reading of all comments, I can answer this with examples:
In a test.html file:
<span>TEST</span><br>
<?php
echo "PHP works.";
?>
outputs:
TEST
But the exact same code in a test.php file outputs:
TEST
PHP works.
NOW using jQuery in an test2.html file to access a separate PHP file asynchronously.
Assuming this basic ajax-requested-file.php which content is:
<span>Ajax content!</span>
If you call it from a test2.html file like this:
<span>TEST#2 using Ajax</span><br>
<div id="ajaxResult"></div>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script>
$.ajax({
url:"ajax-requested-file.php",
data:"",
method:"post",
success:function(html){
$("#ajaxResult").html(html);
}
});
</script>
It outputs:
TEST#2 using Ajax
Ajax content!
Note that, if you are really attentive...
You will notice a milliseconds delay between the appearance of the first line and the second one.
Like here : https://www.bessetteweb.com/SO/43795339/test2.html
Technically you can send a PHP file to a client, but a browser cannot execute PHP code, so there is no point in serving a php script to the client side.
If you are looking for the right web site architecture you should look into the single page architectural style. With it you just create a single HTML page for your site and load any additional content via ajax requests. For changing the page content you rely on js frameworks that manipulate the html DOM tree dynamically in place.
Note that you don't have to be strict on the single page. You can apply the same style for say a handful of logically different pages in your application as well.
To read more see this article and this answer.
I have more that 15 (.js) files in my web page. I need to know is there any other and efficient way to manage java script(.js) files in an HTML or jsp page other than putting all .js files in script tag ?
There are a few different ways to do this, First one as mentioned is to combine them.. Another way is to user server side code to combine them during execution time.
SIMPLE PHP EXAMPLE: myscripts.php
<?php
header('Content-Type: application/javascript');
echo file_get_contents("scripts/script1.js");
echo file_get_contents("scripts/script2.js");
echo file_get_contents("scripts/script3.js");
echo file_get_contents("scripts/script4.js");
?>
By using the above method, you can still manage your scripts easily and have them appear as only one script in your site / page.. Simple use the above with something like
<script src="myscripts.php"></script>
If you do not have a server side language (which generally would mean this is not a hosted page), then you are very limited with options. So that would be the first one i would suggest.
Also,, forgot the one that google use.. Use a single script that includes the others by adding a script tag to the body of your page..
There are a few ways to optimize your website if you have too many js files.
Combining scripts into a single file
Minify scripts: this helps reducing file size
Using a script loader like Headjs
Ofcourse there are other approaches to solving this issue based on the specific scenario. I've just named a few which are common.
I'm pretty new to web development. What is the best practice in keeping the same sidebar and other elements across web pages on one's site? Do you store the sidebar html and call that? If so, how would one go about doing something like that?
There're many options to handle this problem but I've found easy one using jQuery. Use this if it suits your requirements.
Add the jQuery CDN in your HTML file.
Create a JS file as sidebar.js.
Copy all your HTML code of the sidebar and store as a string variable in a function of the JS file. as
function loadNavbarDiv() {
String navbar_code_str = '<nav><div>...</div></nav>
$('body').append(navbar_code_str);
}
Then in the HTML file, you want to add navigation bar, add folowing code in your <head>
<script src="sidebar.js"></script>
<script>
$(document).ready(function(){
loadNavDiv();
});
</script>
It's working fine for me.
Happy coding!
Here's one way to do it: use "include" files. No JavaScript required. The server does the work, instead of requiring the client to add the content.
SSI, or Server Side Includes, were first developed to allow Web
developers to "include" HTML documents inside other pages. If your Web
server supports SSI, it's easy to create templates for your Web site.
Save the HTML for the common elements of your site as separate files.
For example, your navigation section might be saved as navigation.html
or navigation.ssi.
Use the following SSI tag to include that HTML in each page.
<!--#include virtual="path to file/include-file.html" -->
Use that same code on every page that you want to include the file.
That page also describes some other approaches. But if you know this is called using include files, you can search for it more easily. For example, this article describes includes and how to call them from JavaScript if you must.
As long as you're only coding in html, you will need to copy your html into every page. You can store the css for the sidebar in one and the same file and call that on every page though.
Other scripting languages and frameworks might contain templates (php) or master pages (asp.net) for example which make it possible to use the same code in different pages.
I'm trying to learn more about javascript and I've been checking out some code from companies like olark which includes a messaging system on your site.
One thing that I noticed is that when you install their software on your server is that it's just a simple copy/paste of some javascript and then you have a styled window on whatever page it's installed. This has to mean that some HTML/CSS is returned, right?
My question is, how can you go about using javascript and having a form returned or referenced, such as knockout.js? For example, in the most simple sense, say I have the following HTML page. Can I use a <script> tag to call to my server which will return a form?
//page1.html
<body>
...some html here
<script> function call which will return a knockout.js form/table/whatever along with referencing the file containing the viewmodel</script>
</body>
From what I understand anything in a <script> tag is not affected by the same origin policy. Does this mean I can potentially use javascript to call for an external knockout.js form?
Using like this
script type="javascript/text" src="your javascript knockout.js path"
define your path of knockout.js in src in script tag and you can access the function from your knockout.js.
I am just learning to create websites and I have been programmming a lot of OOB languages before so I am kind of used to write small objects and just paste them where I want them.
I would like to know if there is a way to create for instace a login form och what ever piece of html that you use regulare on sites and save that to a file, html or xml and then with the help of javascript add this form onto your main site.
I will try to make an example to clearify what I want to do, it's the javascript that I do not know how to write...
form.html
< form id="form_login" >
Username: <input type="text" id="username"/><br>
Password: <input type="password" id="password"/><br>
<input type="button" id="button_login" value="log in" onclick="login(this)"/>
</form>
index.html
<html>
<head>
</head>
<body>
<div>
<script type="text/javascript" src="javascript.js"></script>
</div>
</body>
</html>
javascript.js
// this is where I am rendered clueless, I want my javascript to render out my form
$(#"div").html(form.html)
I am thinking that I should do a serverrequest to retrieve the form.html but I don't know how.
Personally, I believe that JavaScript is not very well suited for the job - people that turn off JavaScript (and Google too!) won't see important parts of your page (in Google's case, that can lead to less visitors!). Inclusions as you mention them should happen at the server. See Wikipedia's article on Server Side Includes for a possible solution.
Use load method instead:
$('#div').load('form.html', function() {
alert('Load was performed.');
});
It is better to include your files through server-side languages as well using server side includes.
You may want to consider using jQuery templates. They're in beta but have proven to be very useful to keep HTML code, well, HTML.
http://api.jquery.com/category/plugins/templates/