I Love PHPMaker

... because it gets even more powerful and flexible!!

  • About
  • Terms and Conditions
  • Membership Options
  • Sitemap
  • Downloads
    • PHPMaker Extensions Download
    • PHPMaker Projects Download
    • PHP Report Maker Extensions Download
I Love PHPMaker » Customize Template » How to Beautify Your Search Panel in Website Created With PHPMaker 8.0.3
How to Customize Your Pagination Style in Website Created With PHPMaker 8.0.3
How to Beautify Your Page Title in Website Created With PHPMaker 8.0.2

August 27, 2011

How to Beautify Your Search Panel in Website Created With PHPMaker 8.0.3

PHPMaker generates your pages that contain search panel using a standard style (not so eye-catching and not so beauty, I think). In addition, that search panel status will always using one condition based on the setting we chose when we generate the script files. If we want to use the default status whether collapsed or expanded, then we have to re-generate the related script files.

So this following modification will change the look of your search panel, so that it will look more eye-catching and more beauty by adding the colored background and the outlines around its box or section. Also, this following modification will give you the flexibility to decide; whether to use collapsed or expanded as the default status. You can simply adjusting the related constant from the configuration (ewcfg*.php) file. In other words, you don't have to re-generate your related script files that contain the search panel each time you want to switch from collapsed to expanded (and vice versa) for that search panel.

All we have to do is customizing PHPMaker template files. In other words, we will not modify the generated script files at all.

Please click on the following image to watch the demo:

Expanding and Collapsing Search Panel using jQuery
Expanding and Collapsing Search Panel using jQuery

[hidepost]

  1. Open your ewcfg.php file, and find this code:

    // General
    

    before that line, insert this following code:

    // Begin of modification by Masino Sinaga, for customize search panel, August 27, 2011
    define("EW_SEARCH_PANEL_COLLAPSED", TRUE, TRUE); // Whether to collaps or expand the search panel
    // End of modification by Masino Sinaga, for customize search panel, August 27, 2011
    
  2. Open your list-script.php file, and find this code:

    <!--## If PROJ.GetV("SearchPanelCollapsed") Then ##-->
    <script type="text/javascript">
    <!--
    ew_ToggleSearchPanel(<!--##=sPageObj##-->); // Init search panel as collapsed
    //-->
    </script>
    <!--## End If ##-->
    

    then replace it with this following code:

    <!--## If PROJ.GetV("SearchPanelCollapsed") Then ##-->
    
    <?php if (EW_SEARCH_PANEL_COLLAPSED) { ?>
    <script type="text/javascript">
    <!--
    ew_ToggleSearchPanel(<!--##=sPageObj##-->); // Init search panel as collapsed
    //-->
    </script>
    <?php } ?>
    
    <!--## Else ##-->
    
    <?php if (EW_SEARCH_PANEL_COLLAPSED) { ?>
    <script type="text/javascript">
    <!--
    ew_ToggleSearchPanel(<!--##=sPageObj##-->); // Init search panel as collapsed
    //-->
    </script>
    <?php } ?>
    
    <!--## End If ##-->
    
  3. Open your list-script-search.php file, and find this code:

    <?php if ($<!--##=gsTblVar##-->->Export == "" && $<!--##=gsTblVar##-->->CurrentAction == "") { ?>
    <a href="javascript:ew_ToggleSearchPanel(<!--##=sPageObj##-->);" style="text-decoration: none;"><img id="<!--##=sPageObj##-->_SearchImage" src="<!--##=sImageFolder##-->collapse.gif" alt="" width="9" height="9" border="0"></a><span class="phpmaker">&nbsp;<!--##@Search##--></span><br />
    <div id="<!--##=sPageObj##-->_SearchPanel">
    <form name="<!--##=sFormNameBasicSearch##-->" id="<!--##=sFormNameBasicSearch##-->" class="ewForm" action="<?php echo ew_CurrentPage() ?>"<!--## If bExtendedBasicSearch Then ##--> onsubmit="return <!--##=sPageObj##-->.ValidateSearch(this);"<!--## End If ##-->>
    <input type="hidden" id="t" name="t" value="<!--##=gsTblVar##-->" />
    

    then replace it with this following code:

    <?php if ($<!--##=gsTblVar##-->->Export == "" && $<!--##=gsTblVar##-->->CurrentAction == "") { ?>
    <a href="javascript:ew_ToggleSearchPanel(<!--##=sPageObj##-->);" style="text-decoration: none;"><img id="<!--##=sPageObj##-->_SearchImage" src="phpimages/collapse.gif" alt="" width="9" height="9" border="0"></a><span class="phpmaker">&nbsp;<!--##@Search##--></span><br>
    <div id="<!--##=sPageObj##-->_SearchPanel">
    <form name="<!--##=sFormNameBasicSearch##-->" id="<!--##=sFormNameBasicSearch##-->" class="searchpanel" action="<?php echo ew_CurrentPage() ?>"<!--## If bExtendedBasicSearch Then ##--> onsubmit="return <!--##=sPageObj##-->.ValidateSearch(this);"<!--## End If ##-->>
    <input type="hidden" id="t" name="t" value="<!--##=gsTblVar##-->" />
    
  4. Still in the list-script-search.php file, find again this code:

    	<!--## If bBasicSearch Then ##-->
    <div id="xsr_<!--##=RowCnt+2##-->" class="ewCssTableRow">
    	<label><input type="radio" name="<?php echo EW_TABLE_BASIC_SEARCH_TYPE ?>" id="<?php echo EW_TABLE_BASIC_SEARCH_TYPE ?>" value=""<?php if ($<!--##=gsTblVar##-->->getSessionBasicSearchType() == "") { ?> checked="checked"<?php } ?> /><!--##@ExactPhrase##--></label>&nbsp;&nbsp;<label><input type="radio" name="<?php echo EW_TABLE_BASIC_SEARCH_TYPE ?>" id="<?php echo EW_TABLE_BASIC_SEARCH_TYPE ?>" value="AND"<?php if ($<!--##=gsTblVar##-->->getSessionBasicSearchType() == "AND") { ?> checked="checked"<?php } ?> /><!--##@AllWord##--></label>&nbsp;&nbsp;<label><input type="radio" name="<?php echo EW_TABLE_BASIC_SEARCH_TYPE ?>" id="<?php echo EW_TABLE_BASIC_SEARCH_TYPE ?>" value="OR"<?php if ($<!--##=gsTblVar##-->->getSessionBasicSearchType() == "OR") { ?> checked="checked"<?php } ?> /><!--##@AnyWord##--></label>
    </div>
    	<!--## End If ##-->
    

    then remove all of that code. Yes, again, remove all of that code. Don't worry, we will move some part of that code to another lines!

  5. Still in the list-script-search.php file, find this code:

    <div id="xsr_<!--##=RowCnt+1##-->" class="ewCssTableRow">
    	<!--## If bBasicSearch Then ##-->
    

    after the last line of that code, insert this following code:

    	<label><input type="radio" name="<?php echo EW_TABLE_BASIC_SEARCH_TYPE ?>" id="<?php echo EW_TABLE_BASIC_SEARCH_TYPE ?>" value=""<?php if ($<!--##=gsTblVar##-->->getSessionBasicSearchType() == "") { ?> checked="checked"<?php } ?> /><!--##@ExactPhrase##--></label>&nbsp;&nbsp;<label><input type="radio" name="<?php echo EW_TABLE_BASIC_SEARCH_TYPE ?>" id="<?php echo EW_TABLE_BASIC_SEARCH_TYPE ?>" value="AND"<?php if ($<!--##=gsTblVar##-->->getSessionBasicSearchType() == "AND") { ?> checked="checked"<?php } ?> /><!--##@AllWord##--></label>&nbsp;&nbsp;<label><input type="radio" name="<?php echo EW_TABLE_BASIC_SEARCH_TYPE ?>" id="<?php echo EW_TABLE_BASIC_SEARCH_TYPE ?>" value="OR"<?php if ($<!--##=gsTblVar##-->->getSessionBasicSearchType() == "OR") { ?> checked="checked"<?php } ?> /><!--##@AnyWord##--></label>
    
  6. Next step, we will add our new style to the .css file that will be generated by PHPMaker. This will beautify your search panel by adding colored background and outlined around its panel. From your PHPMaker application, go to HTML tab, then click on Styles sub-tab, and then click on Edit Styles button. You will see a CSS Editor window afterwards. Scroll down to the bottom of that textbox, and find this code:

    /*END_USER_STYLES*/
    

    before that line, insert this following code:

    .searchpanel { 
      background-color: #EDEDEB;    
      padding: 0.5em;    
      border-left: 1px solid #9F9F9F;    
      border-right: 1px solid #9F9F9F;    
      border-top: 1px solid #9F9F9F;    
      border-bottom: 1px solid #9F9F9F;    
      text-align: left;     
      font-family: tahoma; /* font name */    
      display: block;  
      vertical-align:top;
    }
    

[/hidepost]

Article by Masino Sinaga / Customize Template / collaps, expand, PHPMaker 8.0.1, PHPMaker 8.0.2, PHPMaker 8.0.3, Search Panel 3 Comments

How to Customize Your Pagination Style in Website Created With PHPMaker 8.0.3
How to Beautify Your Page Title in Website Created With PHPMaker 8.0.2

Comments

  1. Paulo Santos says

    January 6, 2012 at 12:45 am

    I don’t have a list-script.php, list-script-search.php files?!?!
    How to have them?

    Log in to Reply
    • Masino Sinaga says

      January 6, 2012 at 10:14 pm

      They are all located in the C:\Documents and Settings\{YourUserName}\My Documents\PHPMaker\Templates\phpv80.zip\Script folder.

      Log in to Reply

Trackbacks

  1. How to Add jQuery slideDown and slideUp Effects into the Search Panel in Website that Created with PHPMaker 8.0.3 — I Love PHPMaker says:
    October 18, 2011 at 9:38 am

    […] the search panel in the list page of websites that created with PHPMaker (see this article: How to Beautify Your Search Panel in Website Created With PHPMaker 8.0.3), then we will now modify that modification again by adding the jQuery slideDown and slideUp effect […]

    Log in to Reply

Leave a Reply Cancel reply

You must be logged in to post a comment.

This site uses Akismet to reduce spam. Learn how your comment data is processed.

Recent Posts

  • A New PHPMaker 2020 Project File Is Released
  • PHPMaker 2020 Demo Project File Is Released
  • Masino Extensions for PHPMaker 2020 Is Released!
  • Inventory Stock Management Project, Why Should You Have It?
  • A New PHPMaker 2019 Project File Is Released!
  • PHPMaker 2019 Demo Project File Is Released!
  • Masino Extensions for PHPMaker 2019 Is Released!
  • A New PHPMaker 2018 Project File Is Released!
  • PHPMaker 2018 Demo Project File Is Released!
  • Masino Extensions for PHPMaker 2018 Is Released!

Search

Recent Comments

  • Masino Sinaga on Masino Extensions for PHPMaker 2019 Is Released!
  • Masino Sinaga on Masino Extensions for PHPMaker 2019 Is Released!
  • Brien Devine on Masino Extensions for PHPMaker 2019 Is Released!
  • Brien Devine on Masino Extensions for PHPMaker 2019 Is Released!
  • Masino Sinaga on Masino Extensions for PHPMaker 2019 Is Released!

Demo Website

  • Demo of I Love PHPMaker 2020 (MasinoExtensions).
  • Indonesia Post Offices.
  • Stock Inventory Management.
  • Demo of PHPMaker + PHP Report Maker

Another Demo

The following template are not available in this site (must be purchased separately)

  • PHPMaker v2018 Horizontal Vertical Template.
  • PHPMaker v2017 Horizontal Vertical Template.

Demo Explanation

Stock Inventory Management is the good project for your reference, since it uses the real example in the real world. Many useful features you can use from this project, such as how to add the Thousand and Decimal separator character, and also how to calculate multiple row in Grid-Add when End-Users are entering data into the Grid-Add mode.

Categories

  • Customize Template (103)
  • General (3)
  • PHP Report Maker (17)
  • PHP Report Maker Extensions (2)
  • PHPMaker Extensions (76)
  • Tips and Trick (72)

Articles based on version

  • PHPMaker 2020
  • PHPMaker 2019
  • PHPMaker 2018
  • PHPMaker 2017.0.7
  • PHPMaker 12.0.7
  • PHPMaker 11.0.6
  • PHPMaker 10.0.5
  • PHPMaker 9.2.0
  • PHPMaker 8.0.3
  • PHP Report Maker 12

(c) I Love PHPMaker 2010 - 2019 by Masino Sinaga | WordPress | Log in | Back to top