FileMaker Pro Tips-n-Tricks: A New Home-Page for FileMaker Server 13

Entry posted by eXcelisys October 2, 2014

127,612 views

https://fmforums.com/blogs/entry/875-filemaker-pro-tips-n-tricks-a-new-home-page-for-filemaker-server-13/

<h3>FileMaker Pro Tips-n-Tricks: A New Home-Page for FileMaker Server 13</h3>

<h4><b style="color: #000000;">Über Awesome Sauce for FileMaker Server 13</b></h4>

<p style="color: #000000;">We’re going to take the original default index page on your FileMaker Server 13, and replace it with something a little more interesting, and a lot more useful.</p>

<p style="color: #000000;">As I’m sure you’ll recognize, this is the page FileMaker Server 13 comes with:</p>

<p style="color: #000000; text-align: left;">It’s certainly functional. In a way. Sort of. I mean it tells you what you have, right? But it doesn’t really help you <b>do</b> anything. So let’s change that. How about this:</p>

<p style="color: #000000;">And, just to sweeten the deal, let’s make it responsive, so you still get everything you need when you’re looking at it on your phone, like so:</p>

<p style="color: #000000;">While we’re at it, it sure would be nice to be able get to all the hosted databases right from here, so when we clicked/tapped on “Databases” we’d get a list of, well, <i>databases</i> hosted on this server, and they’d all be “fmp://:” links, so we could just use them to open FileMaker Pro/Go and get right in…</p>

<h4><b>1. Get your FileMaker server 13 ready…</b></h4>

<p style="padding-left: 30px;">Make sure your FileMaker server 13 is set up and running correctly, as outlined in the FileMaker Server 13 Getting Started Guide (<a style="color: #1c5c76;" title="Link: https://fmhelp.filemaker.com/docs/13/en/fms13_getting_started.pdf" href="https://fmhelp.filemaker.com/docs/13/en/fms13_getting_started.pdf">https://fmhelp.filemaker.com/docs/13/en/fms13_getting_started.pdf</a>). The home page we’re going to use is built in php, so you’ll want to make sure php is enabled – for simplicity, just go ahead and enable php web publishing when you install FileMaker Server. If FileMaker Server was already installed on a Windows server without enabling PHP, you can refer to the following information on Microsoft’s web site for the appropriate changes in the IIS configuration without reinstalling FileMaker Server:</p>

<p style="padding-left: 60px;"><a title="http://www.microsoft.com/web/downloads/platform.aspx" href="http://www.microsoft.com/web/downloads/platform.aspx" target="_blank">http://www.microsoft.com/web/downloads/platform.aspx</a></p>

<p style="padding-left: 30px;">Simply select PHP from the list of components and continue through the install. Depending on your server OS and whether or not you’re using https, the directory we’ll be working in could vary:</p>

<ul>

<li>Windows (IIS): [drive]:Program FilesFileMakerFileMaker ServerHTTPServerConf</li>

<li>OS X (Apache), using HTTP: /Library/FileMaker Server/HTTPServer/htdocs/</li>

<li>OS X (Apache), using HTTPS: /Library/FileMaker Server/HTTPServer/htdocs/httpsRoot/</li>

</ul>

<p style="padding-left: 30px;">In that working directory, find the old, boring default file (it’ll be called “index.html”) and rename it (to something like “index_blah.html”)</p>

<h4><strong>2. Download This Zip File</strong></h4>

<div id="attachment_1369" style="width: 330px" class="wp-caption aligncenter"><a href="http://www.excelisys.com/blog/wp-content/uploads/2014/10/ANewStart.zip"><img class="wp-image-1369 size-full" src="http://www.excelisys.com/blog/wp-content/uploads/2014/10/FullSizePage-e1412267260663.png" alt="FileMaker Server 13 Web Root Files" width="320" height="205" /></a><p class="wp-caption-text">Download These Goodies</p></div>

<h4><b>3. Put the new files in place</b></h4>

<p style="padding-left: 30px;">Unzip the files accompanying this article, and put them in that directory. They should include a file called “index.php,” and 3 directories: “js,” “stylesheets,” and “images.” When you’re done with this part, what you should have in there is:</p>

<ol>

<ul>

<li>index.php</li>

<li>web.config</li>

<li>images (directory containing 3 .png files and a .ico file)</li>

<li>lib (directory, containing 1 file called “jquery.min.js”)</li>

<li>stylesheets (directory, containing 3 .css files)</li>

<li>The image that came with the server (that “T” in a blue circle), called “TestPage.png”</li>

<li>The index file you renamed in 1.4 above</li>

<li>Whatever else was already in there (may include the WebDirect home page, the httpsRoot if you’re using http on OS X, etc.)</li>

</ul>

</ol>

<p style="padding-left: 30px;">Open the home page (if you’re on the server, that would just be “localhost” or 127.0.0.1 in your browser). You <i>should</i> see a page which looks like that “Über Awesome Sauce” page above. If you <i>don’t</i> see that…</p>

<ol>

<ul>

<li>If you see raw php code (a page that starts with <?php), php is not running on the server – go through the FileMaker server 13 deployment and make sure php is enabled, and just to be safe, install the FM copy of php.</li>

<li>If you still see the original default page, there are a few things to check:

<ol>

<li>Did you update the files in the right place?</li>

<li>Do you have to modify the permissions (Mac: Get Info -> allow “Everyone” to read, Windows: Properties->Security->allow the IUSR read/execute privileges)?</li>

<li>Did you rename the original file (if you didn’t, the server may be configured to give “index.html” a higher priority than “index.php” when both exist – that’s why it’s a lot easier to rename index.html than to reconfigure the server).</li>

</ol>

</li>

</ul>

</ol>

<p style="color: #000000;">Now, you could leave it at that, and everything would work. BUT – you’re a developer and you are just too insatiably curious to leave it there. So let’s break down what’s going on here.</p>

<pre style="color: #000000;"><?php

$rawHost = $_SERVER['HTTP_HOST'];

$rawOS = php_uname('a');

$firstWord = strtok($rawOS,' ');

$osName = ($firstWord=='Darwin') ? 'Mac' : 'Windows';

?></pre>

<li>The first line defines a variable called $rawHost, using the php $_SERVER super global, to identify the server’s address for use in links later.</li>

<li>The second line uses the php_uname() function to get a bunch of information about the server operating system. This includes the OS version, name, and a variety of other information, depending on the OS.</li>

<li>The first word returned by that function is something that can be used to identify the OS. This line extracts that word.</li>

<li>The last line looks at that word, and if that word is “Darwin,” we know the server is a Mac. Otherwise, it’s Windows. This function, of course can identify lots of other operating systems, including Linux, FreeBSD, etc. For this, though, since FMS only runs on Mac & Windows, and Mac always shows up as “Darwin” using this function, we’ll just assume non-Darwin is Windows.</li>

</ul>

<p style="color: #000000;">This page uses Skeleton (<a style="color: #1c5c76;" href="http://www.getskeleton.com "><b>http://www.getskeleton.com</b></a>), which is a css framework that makes it very easy to build responsive web pages, with a lot of the heavy lifting already done for you. Most of the structures here are documented very well on the framework’s home page, but here are some particulars to notice for this page:</p>

<li>On line 28, we’re using the name of the OS we grabbed above (<b>$osName</b>) as part of the page title.</li>

<li>We use it again on line 65, in the subheading.</li>

<li>On line 72, we’ve got the original graphic from the old index page.</li>

<li>The links in lines 76 thru 81 use the <b>$rawHost</b> variable defined in the php to echo out the address of the server as it appears to the page visitor.</li>

<li>Lines 82 and 83 have some very interesting stuff going on to allow the database names to be listed, described below.</li>

</ul>

<h4 style="color: #000000;"><b>The JavaScript</b></h4>

<p style="color: #000000;">We’re using jQuery in this page, mainly because it’s just too cool. Also it makes doing stuff like what we’re doing here very easy. It’s actually used on more than half the internet, so…if it’s good enough for them, it’s good enough for me!</p>

<ul>

<li>On line 92 we load up the jQuery library from the “lib” directory.</li>

<li>The block starting with line 94 and ending on line 139 is jQuery’s “document ready” function, which basically says “do this stuff when the page has loaded and is ready to execute some JavaScript.”</li>

<li>Line 95 hides the “div” on line 83, which has an ID of “jsResponse” (as in “JavaScript Response”). You’ll see why in a minute.</li>

<li>Line 96 adds an unordered list (“ul”) to the last list item (“li” element) on line 82, which has an ID of “dbnames.”</li>

<li>Line 97 creates a new array, called “dbNames” – we’ll get to that in a sec.</li>

<li>Lines 99 thru 114 use jQuery’s “ajax()” function to pull in some info from the server and put it in the page…

<ul>

<li>Line 100 specifies that this will be a “GET” request (as opposed to “POST”)</li>

<li>Line 101 says we’re getting our info from the built-in fmresultset.xml document, with a parameter of -dbnames, which basically gives us an xml document that lists all the databases on the server (actually, all the OPEN databases <b>which have XML sharing enabled</b> - important to remember that if a database doesn’t show up for you…below, we’ll add in the ones which have WebDirect enabled, but to show up here, one of those 2 sharing methods has to be enabled and the DB has to be open on the server).</li>

<li>Line 102 tells the function that we’re getting XML back, so it knows how to read it</li>

<li>Line 103 says “do this if the call to that xml page completes successfully”</li>

<li>Line 104 is jQuery’s way of finding the “record” element in the returned XML. The fmresultset document returns each database name in an element labeled “data” inside an element labeled “record.” So we have to drill down to it – starting with “record.” This line also specifies that we should repeat this for each “record” we find (using “each”).</li>

<li>Once we’re inside a “record” element, on line 105 we look inside it for the text inside the “data” element (which will be the database name), and store that in a variable called “dbName.”</li>

<li>Line 106 adds this database name to the array we set up on line 97. More on that in just a minute.</li>

<li>Line 107 assembles a new list item (“li”), which includes a link to the “dbName” using the “fmp://“ protocol and the “$rawHost” variable we grabbed above for the server address, and adds it (appends it to) the “jsResponse” div we hid above in line 95.</li>

<li>Lines 111 thru 114 say what to do if there’s an error – if the list doesn’t come back OK for whatever reason. Basically, it will add one list item (“li”) to the unordered list we added in line 96, and that list item just says there was an error.</li>

</ul>

</li>

<li>On line 116 we start another ajax call, this time to get the list of databases that are set up for sharing via WebDirect, in case there are any that we didn’t already catch above What we’re doing here is almost identical to what we did with the XML list above, with a few key differences:

<ul>

<li>FMS includes a built in function (called by going to [server]/fmi/webd/dbnames), which it uses on the default WebDirect home page, that lists the available databases in JSON format. Luckily, jQuery knows how to deal with JSON just as well as it does with XML.</li>

</ul>

<ul>

<li>What FMS returns in JSON for each database is a key/value pair (like a variable name and the variable’s value). So that’s what we focus on for each returned item in line 121.</li>

<li>The key is really all we care about, because that’s the actual name of the database.</li>

</ul>

</li>

<li>At this point, we check to see if we’ve already listed this file above. We do that using Javascript’s “indexOf()” method, which basically checks to see if an item exists in an array. Remember we added each database above into the dbNames array (in line 106)? This is why we did that…so we wouldn’t end up listing any databases twice. If the indexOf() method returns -1, that means the item isn’t there. So in that case, we do what we did above in line 107 – assemble an “fmp://“ link for this file and add it to the “jsResponse” div.</li>

<li>After closing the ajax functions, on lines 134 thru 137, we define what happens when someone clicks on the list item on line 82, the one with the id of “dbnames.” We use jQuery’s “click()” function, which listens for user clicks (or taps), and then jQuery’s “toggle()” function, which toggles between showing and hiding an element (the “jsResponse” div in this case, which now contains our list of databases). This is why we hid this element on line 95 – so the list item which displays it would initially appear just as a link that the user could click.</li>

</ul>

<p style="color: #000000;">-Andy Frazier</p>

<p style="color: #000000;"><em><strong>About Andy Frazier:</strong> Andy, a <a href="http://www.excelisys.com/our-team-custom-database-consultants.php" target="_blank">Lead FileMaker Pro Developer with Excelisys</a> for 2 years, wrote his first program in BASIC on a Commodore 64 back in the early 80′s. So, having successfully conquered computers for all time, he took a break from them for about 20 years, playing guitar and writing music (his degree from Berklee is in Film Scoring; he’s written scores for video games and had songs in TV shows like The Sopranos & Charmed). When it turned out there just might be something more to this whole computer thing, he discovered FileMaker Pro, and realized not only that it was easy, it was fun, and it could make a difference by making many people’s jobs much easier. Now certified for FileMaker versions 8 through 13, along with Javascript, PHP, and jQuery, his goal is to create new solutions to improve someone’s life, somehow, some way, every day. Andy was the original developer for a very successful suite of solutions (which can’t be disclosed or he would have to kill himself) in the retail and service industries, he is also the author of several PHP-focused articles, and “the fixer” for countless issues ranging from overhauling failing businesses to solving sticky script situations. Andy has one philosophy with regard to thinking outside the box: there is no box. He feels the best part of developing with a tool like FileMaker Pro is using all the complimentary related technologies (PHP, XML, ODBC, CSS, HTML, Javascript) to do what each is best at and combining them into a whole complete-finished and polished solution which is more than the sum of its parts. </em></p>

<p style="color: #0a1118;"><em><strong>About Excelisys, Inc.:</strong> Founded in 2001, Excelisys (www.excelisys.com) is a dedicated organization specializing in the designing, developing, customizing, supporting, consulting, migrating, upgrading, tweaking, fixing, and integrating of FileMaker Pro solutions, FileMaker Go solutions, MySQL, PostgreSQL, QuickBooks-FileMaker Pro Integration, Excel and MS Access FileMaker Pro conversions/migrations, iPhone and iPad business solutions, and other various database technologies and frameworks that automate your organization’s data solution needs for use on the web, mobile, and desktop platforms. Contact Excelisys today for a free estimate and consultation about your business software automation needs @ 866-592-9235.</em></p>

<p style="color: #0a1118;"><em><a style="color: #027bd2;" title="Link: http://www.filemaker.com" href="http://www.filemaker.com/">* FileMaker and FileMaker Pro are registered trademarks and owned by FileMaker, Inc. in the US and other countries.</a></em></p>

<a href="http://www.excelisys.com/blog/2014/10/02/filemaker-pro-tips-n-tricks-new-home-page-filemaker-server-13/" class='bbc_url' rel='nofollow external'>Source</a>

Sign In

eXcelisys' Blog

FileMaker Pro Tips-n-Tricks: A New Home-Page for FileMaker Server 13

0 Comments

Recommended Comments

Browse

Site Support

Forums

Blogs

Marketplace

Activity

Important Information